real-world-css-libraries 1.0.3 → 1.0.4

package/README.md

@@ -108,20 +108,24 @@ These libraries were explicitly not included because they lack a compatible lice
 * https://github.com/pattle/simpsons-in-css/issues/3
 * https://github.com/soulwire/Makisu/pull/23
 * https://github.com/jackyzha0/sunlit/issues/4
+* https://github.com/replete/obsidian-minimal-theme-css-snippets/issues/13
 
 
 ## Libraries included:
 
-There are **166** files totaling **33.75MB** of unminified CSS.
+There are **200** files totaling **40.75MB** of unminified CSS.
 
 Library | License
 :--     | :--
+[30 Days 30 Submits #18](https://github.com/ShaifArfan/30days30submits/blob/master/day-18/style.css) | MIT
 [3D transforms](https://github.com/desandro/3dtransforms/blob/gh-pages/css/style.css) | MIT
 [960.gs](https://github.com/nathansmith/960-Grid-System/blob/master/code/css/960.css) | GPL-3.0 or MIT
 [98](https://github.com/jdan/98.css/blob/main/style.css) | MIT
 [Academicons](https://github.com/jpswalsh/academicons/blob/v1.9.6/css/academicons.css) | MIT
 [AdminLTE](https://github.com/ColorlibHQ/AdminLTE/blob/master/dist/css/adminlte.css) | MIT
+[AMOLED-cord](https://github.com/LuckFire/amoled-cord/blob/main/src/amoled-cord.css) | MIT
 [Animate](https://github.com/animate-css/animate.css/blob/main/animate.css) | Hippocratic-2.1
+[Animating Hamburger Icons](https://github.com/callmenick/Animating-Hamburger-Icons/blob/master/css/style.css) | MIT
 [Animo](https://github.com/ThrivingKings/animo.js/blob/master/animate-animo.css) | MIT
 [Animsition](https://github.com/blivesta/animsition/blob/master/dist/css/animsition.css) | MIT
 [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox/blob/master/awesome-bootstrap-checkbox.css) | MIT
@@ -131,6 +135,7 @@ Library | License
 [Blue-Topaz Obsidian](https://raw.githubusercontent.com/PKM-er/Blue-Topaz_Obsidian-css/refs/heads/master/obsidian.css) | MIT
 [Boilerform](https://github.com/Andy-set-studio/boilerform/blob/master/dist/css/boilerform.css) | MIT
 [Bojler](https://unpkg.com/@slicejack/bojler@3.2.1/dist/inline.css) | MIT
+[Bootplus](https://github.com/aozora/bootplus/blob/master/docs/assets/css/bootplus.css) | Apache-2.0 or GPL-2.0
 [Bootstrap 4](https://github.com/twbs/bootstrap/releases/tag/v4.6.2) | MIT
 [Bootstrap 5](https://github.com/twbs/bootstrap/releases/tag/v5.3.8) | MIT
 [Bttn](https://github.com/ganapativs/bttn.css/blob/master/dist/bttn.css) | MIT
@@ -162,19 +167,24 @@ Library | License
 [Doxygen Awesome](https://github.com/jothepro/doxygen-awesome-css/blob/main/doxygen-awesome.css) | MIT
 [Effeckt](https://github.com/h5bp/Effeckt.css/blob/master/css/effeckt.css) | MIT
 [ElegantFin](https://github.com/lscambo13/ElegantFin/blob/main/Theme/ElegantFin-theme-v25.12.31.css) | MIT
+[Enferno](https://github.com/level09/enferno/blob/master/enferno/static/css/app.css) | MIT
 [Evil](https://github.com/tlrobinson/evil.css/blob/master/evil.css) | Public Domain
+[Facebook Buttons](https://github.com/necolas/css3-facebook-buttons/blob/master/fb-buttons.css) | MIT
 [FF-Ultima](https://github.com/soulhotel/FF-ULTIMA/blob/main/theme/ffu-internal-appearance.css) | MPL-2.0
 [Fileicon](https://github.com/picturepan2/fileicon.css/blob/master/fileicon.css) | MIT
 [Flakes](https://github.com/kumailht/flakes/blob/master/css/all.css) | MIT
 [Flex Layout Attribute](https://github.com/StefanKovac/flex-layout-attribute/blob/master/css/flex-layout-attribute.css) | MIT
+[FluentBird](https://github.com/Deathbyteacup/fluentbird/blob/main/userChrome.css) | MIT
 [Fomantic UI](https://github.com/fomantic/Fomantic-UI/blob/develop/dist/semantic.css) | MIT
 [Font Awesome](https://github.com/FortAwesome/Font-Awesome/releases/tag/7.2.0) | MIT
 [Foundation](https://github.com/foundation/foundation-sites/releases/tag/v6.9.0) | MIT
+[Freebies](https://github.com/uisual/freebies/blob/master/curve/style.css) | MIT
 [Furatto](https://github.com/IcaliaLabs/furatto/blob/master/dist/css/furatto.css) | MIT
 [Gallery](https://github.com/benschwarz/gallery-css/blob/master/dist/gallery.prefixed.css) | MIT
 [GitHub-Dark](https://github.com/StylishThemes/GitHub-Dark/blob/master/github-dark.user.css) | BSD-2-Clause
 [GitHub-Markdown](https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css) | MIT
 [GitHub-Windows](https://github.com/Athari/CssGitHubWindows/blob/master/GitHubWindows.user.css) | MIT
+[gitweb-theme](https://github.com/kogakure/gitweb-theme/blob/master/gitweb.css) | MIT
 [google-type](https://github.com/femmebot/google-type/blob/master/css/google-type.css) | MIT
 [Gridism](https://github.com/cobyism/gridism/blob/master/gridism.css) | MIT
 [Gridlex](https://github.com/devlint/gridlex/blob/master/dist/gridlex.css) | MIT
@@ -189,10 +199,16 @@ Library | License
 [Icon Hover Effects](https://github.com/codrops/IconHoverEffects/blob/master/css/component.css) | MIT
 [Instagram.css](https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css) | MIT
 [Jupyter Themes](https://github.com/dunovank/jupyter-themes/blob/master/jupyterthemes/styles/compiled/gruvboxd.css) | MIT
+[Justified](https://github.com/nitinhayaran/Justified.js/blob/master/jquery.justified.css) | MIT
+[Kickoff](https://github.com/TryKickoff/kickoff/blob/master/assets/dist/css/styleguide.css) | MIT
+[KNACSS](https://github.com/alsacreations/KNACSS/blob/master/assets/css/natives.css) | WTFPL
 [Less Framework](https://github.com/jonikorpi/Less-Framework/blob/master/main-17px.css) | MIT
+[Linktree](https://github.com/johnggli/linktree/blob/master/style.css) | MIT
+[littlebox](https://github.com/cmaddux/littlebox/blob/master/lib/littlebox.css) | MIT
 [Load Awesome](https://labs.danielcardoso.net/load-awesome/assets/loaders.css) | MIT
 [Loaders](https://github.com/ConnorAtherton/loaders.css/blob/master/loaders.css) | MIT
 [Luxbar](https://github.com/balzss/luxbar/blob/master/build/luxbar.css) | MIT
+[Lynx](https://github.com/jpanther/lynx/blob/dev/assets/css/compiled/main.css) | MIT
 [markdown-css](https://github.com/mrcoles/markdown-css/blob/master/markdown.css) | MIT
 [Material for Bootstrap](https://github.com/Daemonite/material/blob/master/css/material.css) | MIT
 [medium.css](https://github.com/lucagez/medium.css/blob/master/demo/src/medium_extended.css) | MIT
@@ -210,11 +226,14 @@ Library | License
 [NES.css](https://unpkg.com/nes.css@2.3.0/css/nes.css) | MIT
 [Normalize](https://github.com/necolas/normalize.css/blob/master/normalize.css) | MIT
 [object-fit Polyfill](https://github.com/anselmh/object-fit/blob/master/dist/polyfill.object-fit.css) | MIT
+[Obnoxious](https://github.com/tholman/obnoxious.css/blob/master/obnoxious.css) | MIT
 [Obsidian Colored Sidebar](https://github.com/CyanVoxel/Obsidian-Colored-Sidebar/blob/main/Colored%20Sidebar%20Items.css) | MIT
 [Obsidian Modular CSS Layout](https://github.com/efemkay/obsidian-modular-css-layout/blob/main/MCL%20Multi%20Column.css) | GPL-3.0
+[Obsidian Notebook Themes](https://github.com/CyanVoxel/Obsidian-Notebook-Themes/blob/main/Notebook%20Backgrounds.css) | MIT
 [OffCanvasMenuEffects](https://github.com/codrops/OffCanvasMenuEffects/blob/master/css/menu_cornermorph.css) | MIT
 [Orbit](https://unpkg.com/@zumer/orbit@1.4.11/dist/orbit.css) | MIT
 [Paper](https://github.com/cognitom/paper-css/blob/master/paper.css) | MIT
+[PatternBolt](https://github.com/buseca/patternbolt/blob/gh-pages/css/style-demo.css) | MIT
 [PatternFly](https://unpkg.com/@patternfly/patternfly@6.5.2/patternfly.css) | MIT
 [Pesticide](https://github.com/mrmrs/pesticide/blob/main/css/pesticide.css) | MIT
 [Photon](https://github.com/connors/photon/blob/master/dist/css/photon.css) | MIT
@@ -224,6 +243,8 @@ Library | License
 [Portfolio Template](https://github.com/nisarhassan12/portfolio-template/blob/master/index.css) | GPL-3.0
 [Preboot](https://github.com/mdo/preboot/blob/gh-pages/css/docs-compiled.css) | MIT
 [Pretty Checkbox](https://github.com/lokesh-coder/pretty-checkbox/blob/master/dist/pretty-checkbox.css) | MIT
+[Progress Tracker](https://github.com/NigelOToole/progress-tracker/blob/master/src/styles/progress-tracker.css) | MIT
+[ProxMorph](https://github.com/IT-BAER/proxmorph/blob/main/themes/theme-unifi.css) | MIT
 [Pure](https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure.css) | BSD-3-Clause
 [Pygments Fruity](https://github.com/richleland/pygments-css/blob/master/fruity.css) | Unlicense
 [Ratchet](https://github.com/twbs/ratchet/blob/master/dist/css/ratchet.css) | MIT
@@ -237,16 +258,19 @@ Library | License
 [Ripple UI](https://unpkg.com/rippleui@1.12.1/dist/css/styles.css) | MIT
 [Sakura](https://github.com/oxalorg/sakura/blob/master/css/sakura.css) | MIT
 [Sanitize](https://github.com/csstools/sanitize.css/blob/main/sanitize.css) | CC0-1.0
+[SAPC-APCA](https://github.com/Myndex/SAPC-APCA/blob/master/CSS/MyndexbDark.css) | AGPL-3.0
 [Select2 Bootstrap](https://github.com/t0m/select2-bootstrap-css/blob/master/select2-bootstrap.css) | MIT
 [Select](https://github.com/filamentgroup/select-css/blob/master/src/select-css.css) | MIT
 [Semantic UI](https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css) | MIT
 [Shards](https://github.com/DesignRevision/shards-ui/blob/master/dist/css/shards.css) | MIT
+[Shina Fox](https://github.com/Shina-SG/Shina-Fox/blob/main/userChrome.css) | MPL-2.0
 [Sierra](https://unpkg.com/sierra-library@3.5.0/dist/sierra.css) | GPL-2.0
 [Simple Grid](https://github.com/zachacole/Simple-Grid/blob/master/simple-grid.css) | MIT
 [Simple Line Icons](https://github.com/thesabbir/simple-line-icons/blob/master/dist/styles/simple-line-icons.css) | MIT
 [Simple](https://codeberg.org/kevquirk/simple.css/src/branch/main/simple.css) | MIT
 [SimpTip](https://github.com/arashmanteghi/simptip/blob/master/simptip.css) | MIT
 [Skeleton](https://github.com/dhg/Skeleton/blob/master/css/skeleton.css) | MIT
+[Social Sign-in Buttons](https://github.com/necolas/css3-social-signin-buttons/blob/gh-pages/auth-buttons.css) | Unlicense
 [SPCSS](https://github.com/susam/spcss/blob/main/sp.css) | MIT
 [Spectre](https://github.com/picturepan2/spectre/blob/master/dist/spectre.css) | MIT
 [Spicetify Bloom](https://github.com/nimsandu/spicetify-bloom/blob/main/src/user.css) | MIT
@@ -261,9 +285,12 @@ Library | License
 [System](https://github.com/sakofchit/system.css/blob/main/style.css) | MIT
 [Tablecloth](https://github.com/bwsewell/tablecloth/blob/master/assets/css/tablecloth.css) | MIT
 [Tachyons](https://github.com/tachyons-css/tachyons/blob/main/css/tachyons.css) | MIT
+[Tailwind Cards](https://github.com/hasinhayder/tailwind-cards/blob/master/tailwind.css) | MIT
 [Tailwind](https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.css) | MIT
+[The 50 Front-end Project #44](https://github.com/SudeepAcharjee/The-50-Front-end-Project/blob/main/44.Admin%20panel%20Dashboard/Admin%20Dashboard%20Panel/style.css) | BSL-1.0
 [The New CSS Reset](https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css) | MIT
 [Toast](https://github.com/daneden/Toast/blob/master/css/grid.css) | MIT
+[Tocas](https://github.com/teacat/tocas/blob/master/dist/tocas.css) | MIT
 [Tooltip Twispy](https://github.com/HubSpot/tooltip/blob/master/dist/css/tooltip-theme-twipsy.css) | MIT
 [Tufte](https://unpkg.com/tufte-css@1.8.0/tufte.css) | MIT
 [Tui](https://github.com/vinibiavatti1/TuiCss/blob/master/dist/tuicss.css) | MIT
@@ -271,14 +298,22 @@ Library | License
 [UIkit](https://github.com/uikit/uikit/blob/develop/dist/css/uikit.css) | MIT
 [Universal.css](https://raw.githubusercontent.com/marmelab/universal.css/refs/heads/master/universal.css) | WTFPL
 [USWDS](https://unpkg.com/@uswds/uswds@3.13.0/dist/css/uswds.css) | CC0-1.0
+[Utility OpenType](https://github.com/kennethormandy/utility-opentype/blob/master/css/utility-opentype.css) | MIT
+[Vim CSS3 Syntax](https://github.com/hail2u/vim-css3-syntax/blob/main/test/test.css) | MIT
 [VitePress](https://github.com/vuejs/vitepress/blob/v1.6.4/src/client/theme-default/styles/components/vp-doc.css) | MIT
 [Vivify](https://github.com/Martz90/vivify/blob/master/vivify.css) | MIT
 [Voxels](https://github.com/HunterLarco/voxel.css/blob/master/src/voxel.css) | MIT
+[Waffle Grid](https://github.com/pr1mer-tech/waffle-grid/blob/master/dist/waffle-grid.css) | MIT
 [Water](https://cdn.jsdelivr.net/npm/water.css@2.1.1/out/water.css) | MIT
 [Weather Icons](https://github.com/erikflowers/weather-icons/tree/master/css) | MIT
 [Webgradients](https://github.com/itmeo/webgradients/blob/master/webgradients.css) | MIT
 [Wenk](https://github.com/tiaanduplessis/wenk/blob/master/dist/wenk.cssnext.css) | MIT
+[Wikipedia Dark](https://github.com/StylishThemes/Wikipedia-Dark/blob/master/wikipedia-dark.user.css) | CC-BY-SA-4.0
+[Windows 95](https://github.com/h01000110/windows-95/blob/master/_sass/_main.scss) | MIT
 [Windows 98](https://github.com/yocontra/windows_98.css/blob/master/dist/win98.css) | MIT
 [Wing](https://github.com/kbrsh/wing/blob/master/dist/wing.css) | MIT
+[Woah](https://github.com/joerez/Woah.css/blob/master/woah.css) | MIT
 [WTF Forms](https://github.com/mdo/wtf-forms/blob/master/wtf-forms.css) | MIT
+[YaCy](https://github.com/yacy/yacy_webclient_yaml4/blob/master/yaml/forms/gray-theme.css) | CC-BY-2.0
+[Yue](https://github.com/typlog/yue.css/blob/master/src/yue.css) | MIT
 [Zotero Dark Theme](https://github.com/Rosmaninho/Zotero-Dark-Theme/blob/main/userChrome.css) | GPL-3.0

package/index.js

@@ -8,8 +8,10 @@ import { join } from 'node:path';
 const __dirname = import.meta.dirname;
 
 const nameMap = {
+  '30days30submits-18': '30 Days 30 Submits #18',
   '3dtransforms': '3D transforms',
   'admin-lte': 'AdminLTE',
+  'amoled-cord': 'AMOLED-cord',
   beercss: 'Beer CSS',
   'blue-topaz-obsidian': 'Blue-Topaz Obsidian',
   cleanslate: 'CleanSlate',
@@ -27,14 +29,18 @@ const nameMap = {
   'csszengarden-215': 'CSS Zen Garden #215',
   'elegantfin': 'ElegantFin',
   'ff-ultima': 'FF-Ultima',
+  fluentbird: 'FluentBird',
   fomantic: 'Fomantic UI',
   'github-dark': 'GitHub-Dark',
   'github-markdown': 'GitHub-Markdown',
   'github-windows': 'GitHub-Windows',
+  'gitweb-theme': 'gitweb-theme',
   'google-type': 'google-type',
   halfstyle: 'HalfStyle',
   'html-sheets-of-paper': 'HTML Sheets of Paper',
   instagram: 'Instagram.css',
+  knacss: 'KNACSS',
+  littlebox: 'littlebox',
   'material-for-bootstrap': 'Material for Bootstrap',
   'markdown-css': 'markdown-css',
   'medium.css': 'medium.css',
@@ -46,27 +52,38 @@ const nameMap = {
   'object-fit-polyfill': 'object-fit Polyfill',
   'obsidian-modular-css-layout': 'Obsidian Modular CSS Layout',
   'off-canvas-menu-effects': 'OffCanvasMenuEffects',
+  patternbolt: 'PatternBolt',
   patternfly: 'PatternFly',
+  proxmorph: 'ProxMorph',
   rippleui: 'Ripple UI',
+  'sapc-apca': 'SAPC-APCA',
   semantic: 'Semantic UI',
   simptip: 'SimpTip',
+  'social-signin-buttons': 'Social Sign-in Buttons',
   spcss: 'SPCSS',
   'stackoverflow-dark': 'StackOverflow-Dark',
   'swagger-ui-themes-2': 'Swagger UI Themes 2',
   'swagger-ui-themes-3': 'Swagger UI Themes 3',
+  'the-50-front-end-project-44': 'The 50 Front-end Project #44',
   'the-new-css-reset': 'The New CSS Reset',
   'tw-animate-css': 'tw-animate-css',
   uikit: 'UIkit',
+  'utility-opentype': 'Utility OpenType',
   universal: 'Universal.css',
   uswds: 'USWDS',
+  'vim-css3-syntax': 'Vim CSS3 Syntax',
   vitepress: 'VitePress',
-  'wtf-forms': 'WTF Forms'
+  'wikipedia-dark': 'Wikipedia Dark',
+  'wtf-forms': 'WTF Forms',
+  yacy: 'YaCy'
 };
-// Prefer keywords listed here:
+// Prefer identifiers listed here:
 // https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository#searching-github-by-license-type
+// spdx.org/licenses
 const nameLicenseMap = {
   '960.gs': 'GPL-3.0 or MIT',
   animate: 'Hippocratic-2.1',
+  bootplus: 'Apache-2.0 or GPL-2.0',
   carbon: 'Apache-2.0',
   'css-diner': 'MPL-2.0',
   'css-extras': 'CC0-1.0 or MIT',
@@ -79,6 +96,7 @@ const nameLicenseMap = {
   'stackoverflow-dark': 'CC-BY-SA-4.0',
   'github-dark': 'BSD-2-Clause',
   holmes: 'GPL-3.0',
+  knacss: 'WTFPL',
   meyer: 'Public Domain',
   'microsoft-metro-buttons': 'CC-BY-3.0',
   missing: 'BSD-2-Clause',
@@ -89,9 +107,15 @@ const nameLicenseMap = {
   remedy: 'MPL-2.0',
   'remedy-quotes': 'MPL-2.0',
   sanitize: 'CC0-1.0',
+  'sapc-apca': 'AGPL-3.0',
+  'shina-fox': 'MPL-2.0',
   sierra: 'GPL-2.0',
+  'social-signin-buttons': 'Unlicense',
+  'the-50-front-end-project-44': 'BSL-1.0',
   universal: 'WTFPL',
   uswds: 'CC0-1.0',
+  'wikipedia-dark': 'CC-BY-SA-4.0',
+  yacy: 'CC-BY-2.0',
   'zotero-dark-theme': 'GPL-3.0'
 };
 
@@ -110,10 +134,16 @@ function getFullName (file) {
   const name = getName(file);
   return nameMap[name] || titleCase(name);
 }
-function getVersion (file) {
-  return 'v' + file
-    .replace('.css', '')
-    .split('-v')[1];
+export const getVersion = function (file) {
+  // 'ultimate-victory.css-v1.0.2.css' => ['ultimate', 'ictory', '1.0.2']
+  const versionGroup = file
+    .replaceAll('.css', '')
+    .split('-v');
+
+  // '1.0.2'
+  const version = versionGroup[versionGroup.length - 1];
+
+  return 'v' + version;
 }
 function getLicences (file) {
   const name = getName(file);

package/libs/30days30submits-18-v0.0.0.css

@@ -0,0 +1,213 @@
+/* https://github.com/ShaifArfan/30days30submits/blob/master/day-18/style.css */
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html{
+  font-size: 16px;
+  font-family: 'Montserrat';
+}
+body{
+  background-color: azure;
+  width: 100%;
+}
+
+section{
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-x: hidden;
+}
+.container{
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+.container img{
+  height: 100%;
+  width: 100%;
+}
+.all-tooltip{
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+}
+
+.tooltip-content{
+  position: absolute;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0px 0px 20px #00000020;
+  padding: 30px;
+  border-radius:8px;
+  width: 90vw;
+  max-width: 300px;
+  opacity: 0;
+  pointer-events: none;
+  /* left: -50%; */
+  z-index: 2;
+}
+.tooltip-content .arrow{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 10px solid transparent;
+  border-bottom-color: rgb(255, 255, 255);
+  top: 0px;
+  left: 50%;
+  transform:translate(-50%, -100%) rotate(0deg);
+}
+.pin{
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 80%;
+  height: 25px;
+  width: 25px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 50%;
+  cursor: pointer;
+}
+.pin:after{
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgb(255, 255, 255);
+  border-radius: 50%;
+  animation: puls-effect 1s ease infinite;
+}
+.tooltip.active .tooltip-content{
+  opacity: 1;
+  pointer-events: all;
+  display: block;
+}
+
+/* Custom Style for tooltip-1 */
+
+.tooltip-1 .pin{
+  top: 40%;
+  left: 82%;
+  height: 15px;
+  width: 15px;
+  background-color: rgb(255, 255, 255);
+}
+.tooltip-1 .tooltip-content{
+  display: flex;
+  max-width: 500px;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0;
+  background-color: aliceblue;
+}
+.tooltip-1.active .tooltip-content{
+  display: flex;
+}
+.tooltip-1 .tooltip-content .img{
+  width: 50%;
+object-fit: cover;
+}
+.tooltip-1 .tooltip-content .content{
+  width: 50%;
+  padding: 20px;
+}
+.tooltip-1 .tooltip-content .content h1{
+  font-size: 24px;
+}
+.tooltip-1 .tooltip-content .content p{
+  font-size: 14px;
+}
+.tooltip-1 .tooltip-content .content button{
+  font-family: 'Montserrat';
+  font-size: 18px;
+  font-weight: 400;
+  border: none;
+  outline: none;
+  background-color: white;
+  color: black;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 20px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 20px #00000020;
+}
+
+/* custom style for tooltip-2 */
+
+.tooltip-2 .pin{
+  top: 80%;
+  left: 35%;
+  height: 15px;
+  width: 15px;
+}
+.tooltip-2 .tooltip-content .content h1{
+  margin: 20px 0;
+}
+.tooltip-2 .tooltip-content{
+  background-color: aliceblue;
+}
+.tooltip-2 .tooltip-content button{
+  font-family: 'Montserrat';
+  font-size: 18px;
+  font-weight: 400;
+  border: none;
+  outline: none;
+  background-color: white;
+  color: black;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 20px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 20px #00000020;
+}
+
+/* Custom style for tooltip-3 */
+
+.tooltip-3 .pin{
+  top: 20%;
+  left: 5%;
+  height: 15px;
+  width: 15px;
+}
+/* Custom style for tooltip-4 */
+
+.tooltip-4 .pin{
+  top: 80%;
+  left: 5%;
+  height: 15px;
+  width: 15px;
+}
+
+/* Puls Effect For Pins */
+
+@keyframes puls-effect{
+  0%{
+    transform: scale(1);
+    opacity: 1;
+  }
+  100%{
+    transform: scale(3);
+    opacity: 0;
+  }
+}
+
+/* Media Query */
+
+@media (max-width: 768px){
+  .tooltip-1 .tooltip-content{
+    flex-direction: column;
+    max-width: 300px;
+  }
+  .tooltip-1 .tooltip-content .content,
+  .tooltip-1 .tooltip-content .img{
+    width: 100%;
+  }
+}