diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 00000000..a2f03855
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null
+  },
+  "ignoreFiles": [
+    "**/dist/**",
+    "**/coverage/**"
+  ]
+}
diff --git a/package.json b/package.json
index 1175a45a..d077b77a 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,11 @@
   },
   "scripts": {
     "lint": "eslint bin src test workspaces public",
+    "lint:css": "stylelint \"**/*.css\"",
     "lint-fix": "npm run lint -- --fix",
     "prepublishOnly": "rimraf ./dist && npm run build && pkg-ok",
     "build": "node ./esbuild.config.js",
-    "test": "npm run test-only && npm run lint",
+    "test": "npm run test-only && npm run lint && npm run lint:css",
     "test-only": "glob -c \"node --no-warnings --test-concurrency 1 --test\" \"test/**/*.test.js\"",
     "coverage": "c8 --reporter=lcov npm run test"
   },
@@ -75,7 +76,9 @@
     "pkg-ok": "^3.0.0",
     "pretty-bytes": "^7.0.0",
     "rimraf": "^6.0.1",
-    "server-destroy": "^1.0.1"
+    "server-destroy": "^1.0.1",
+    "stylelint": "^16.20.0",
+    "stylelint-config-standard": "^38.0.0"
   },
   "dependencies": {
     "@nodesecure/documentation-ui": "^1.3.0",
diff --git a/public/components/bundlephobia/bundlephobia.css b/public/components/bundlephobia/bundlephobia.css
index c14d422f..8d963415 100644
--- a/public/components/bundlephobia/bundlephobia.css
+++ b/public/components/bundlephobia/bundlephobia.css
@@ -14,7 +14,7 @@ section#package-info div.bundlephobia>div {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  box-shadow: 1px 1px 10px rgba(41, 103, 122, 0.3) inset;
+  box-shadow: 1px 1px 10px rgb(41 103 122 / 30%) inset;
 }
 
 section#package-info div.bundlephobia>div+div {
@@ -22,19 +22,20 @@ section#package-info div.bundlephobia>div+div {
 }
 
 section#package-info div.bundlephobia>div>b {
-  font-weight: 800px;
+  font-weight: 800;
   color: var(--secondary);
   margin-bottom: 5px;
   font-size: 18px;
 }
+
 section#package-info div.bundlephobia>div>b i {
-  font-family: 'mononoki';
+  font-family: mononoki;
   font-size: 14px;
   color: #fce12b;
 }
 
 section#package-info div.bundlephobia>div>span {
   font-size: 12px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   text-transform: uppercase;
 }
diff --git a/public/components/expandable/expandable.css b/public/components/expandable/expandable.css
index 376cbd7e..9fa87843 100644
--- a/public/components/expandable/expandable.css
+++ b/public/components/expandable/expandable.css
@@ -4,10 +4,10 @@ span.expandable {
   justify-content: center !important;
   height: 35px;
   font-size: 13px;
-  font-family: "mononoki";
+  font-family: mononoki;
   background: none;
   color: #00B0FF;
-  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
   transition: all 0.2s linear;
   margin-top: 5px;
 }
diff --git a/public/components/file-box/file-box.css b/public/components/file-box/file-box.css
index 731f05d3..efadbf9f 100644
--- a/public/components/file-box/file-box.css
+++ b/public/components/file-box/file-box.css
@@ -4,12 +4,10 @@
   padding: 10px;
   border-top: 2px solid #351ea7;
   border-left: 2px solid #351ea7;
-  background: -moz-linear-gradient(top, rgba(12, 15, 94, 0.27) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(top, rgba(12, 15, 94, 0.27) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to bottom, rgba(12, 15, 94, 0.27) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(to bottom, rgb(12 15 94 / 27%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#450c0f5e', endColorstr='#00000000', GradientType=0);
   border-radius: 4px;
-  box-shadow: 1px 1px 10px rgba(18, 101, 109, 0.1);
+  box-shadow: 1px 1px 10px rgb(18 101 109 / 10%);
 }
 
 .box-file-info+.box-file-info {
@@ -32,16 +30,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'mononoki';
+  font-family: mononoki;
   font-weight: bold;
   text-shadow: 2px 2px 10px #000;
 }
+
 .box-file-info>.box-header>span.Critical {
   background: #d32f2f;
 }
+
 .box-file-info>.box-header>span.Warning {
   background: #f08e26;
 }
+
 .box-file-info>.box-header>span.Information {
   background: #0288d1ab;
 }
@@ -49,7 +50,7 @@
 .box-file-info>.box-header>.box-title {
   font-size: 18px;
   font-variant: small-caps;
-  font-family: "mononoki";
+  font-family: mononoki;
   color: #FFF;
   font-weight: bold;
   letter-spacing: 1px;
@@ -122,7 +123,7 @@
   font-size: 12px;
   margin-top: 5px;
   color: var(--secondary);
-  font-family: "mononoki";
+  font-family: mononoki;
   word-break: break-all;
 }
 
@@ -153,7 +154,7 @@
   height: 18px;
   margin-top: 10px;
   font-size: 14px;
-  font-family: "system-ui";
+  font-family: system-ui;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/public/components/gauge/gauge.css b/public/components/gauge/gauge.css
index 8a169489..fad86846 100644
--- a/public/components/gauge/gauge.css
+++ b/public/components/gauge/gauge.css
@@ -10,12 +10,13 @@
   padding: 0 10px;
   border-radius: 4px;
 }
+
 body.dark .gauge>.line {
   color: white;
 }
 
 .gauge>.line.clickable:hover {
-  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+  background: linear-gradient(to bottom,  rgb(255 255 255 / 100%) 0%,rgb(255 255 255 / 0%) 100%);
   cursor: pointer;
 }
 
@@ -38,9 +39,10 @@ body.dark .gauge>.line.clickable:hover {
   width: 30px;
   flex-shrink: 0;
   text-align: right;
-  font-family: "mononoki";
+  font-family: mononoki;
   color: var(--secondary-darker);
 }
+
 .gauge>.line>.line--column.border-bottom {
   border-bottom: 1px solid #8080803d;
   padding-bottom: 5px;
@@ -65,21 +67,24 @@ body.dark .gauge>.line.clickable:hover {
   border-radius: 4px;
   overflow: hidden;
 }
+
 .gauge .gauge--bar >.usage {
   height: inherit;
   background-color: var(--secondary-darker);
 }
 
 .gauge .chip {
-  font-family: "mononoki";
+  font-family: mononoki;
   background: #8dabe536;
   border-radius: 8px;
   font-size: 14px;
   padding: 3px 5px;
 }
+
 .gauge .chip:last-child {
   margin-right: 30px;
 }
+
 .gauge .chip + .chip {
   margin-left: 10px;
 }
diff --git a/public/components/legend/legend.css b/public/components/legend/legend.css
index d6b932d2..e435e2d8 100644
--- a/public/components/legend/legend.css
+++ b/public/components/legend/legend.css
@@ -4,14 +4,11 @@
   bottom: 40px;
   z-index: 30;
   max-width: 692px;
-  padding: 4px;
-  border-radius: 0 0 0 1rem;
   overflow: hidden;
   transition: transform 0.3s;
   display: none;
-  flex-direction: column;
+  flex-flow: column wrap;
   justify-content: right;
-  flex-wrap: wrap;
   font-size: 14px;
   color: #030421;
   padding: 0 10px 10px 0;
@@ -33,7 +30,7 @@
   height: 15px;
   margin: 0 5px;
   border-radius: 50%;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.34);
+  box-shadow: 0 0 10px rgb(0 0 0 / 34%);
 }
 
 .legend {
@@ -47,7 +44,7 @@
 }
 
 .legend-box:hover {
-  border: 1px solid rgba(48, 56, 165, 0.6);
+  border: 1px solid rgb(48 56 165 / 60%);
 }
 
 .legend-box:hover > .legend {
diff --git a/public/components/locker/locker.css b/public/components/locker/locker.css
index 1b981272..dc641c0d 100644
--- a/public/components/locker/locker.css
+++ b/public/components/locker/locker.css
@@ -41,7 +41,7 @@
 }
 
 #network-locker>p {
-  font-family: "mononoki";
+  font-family: mononoki;
   padding-right: 10px;
   display: flex;
   align-items: center;
diff --git a/public/components/navigation/navigation.css b/public/components/navigation/navigation.css
index e5e43ca9..5b605ab1 100644
--- a/public/components/navigation/navigation.css
+++ b/public/components/navigation/navigation.css
@@ -40,10 +40,10 @@ nav#aside>ul li+li {
 
 nav#aside>ul li:not(.active):hover {
   cursor: pointer;
-  background: rgba(50, 200, 255, 0.085);
+  background: rgb(50 200 255 / 8.5%);
 }
 
-nav#aside>ul li.active:before {
+nav#aside>ul li.active::before {
   background: var(--secondary);
   position: absolute;
   left: 0;
diff --git a/public/components/package/header/header.css b/public/components/package/header/header.css
index 67410275..9a6e938d 100644
--- a/public/components/package/header/header.css
+++ b/public/components/package/header/header.css
@@ -6,8 +6,8 @@ div.package-header {
 
 div.package-header>.package-name {
   display: flex;
-  font-family: "mononoki";
-  text-shadow: 1px 1px 5px rgba(20, 20, 20, 0.5);
+  font-family: mononoki;
+  text-shadow: 1px 1px 5px rgb(20 20 20 / 50%);
 }
 
 div.package-header>.package-name>.name {
@@ -35,6 +35,7 @@ div.package-header>.package-name>.info {
   border: none;
   margin-left: auto;
   cursor: pointer;
+
   /* https://codepen.io/sosuke/pen/Pjoqqp */
   filter: invert(71%) sepia(22%) saturate(6942%) hue-rotate(149deg) brightness(101%) contrast(106%);
 }
@@ -54,7 +55,7 @@ div.package-header>.package-name>.info-menu>.info-menu-title {
   font-weight: bold;
   text-align: center;
   margin-bottom: 12px;
-  color: rgb(39, 38, 38);
+  color: rgb(39 38 38);
 }
 
 div.package-header>.package-name>.info-menu>a {
@@ -105,11 +106,11 @@ div.package-header>ul.flags {
   position: absolute;
   z-index: 21;
   font-size: 13px;
-  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
   top: 150%;
   left: 50%;
   margin-left: -140px;
-  font-family: "mononoki";
+  font-family: mononoki;
 }
 
 .flag-infobulle>span::after {
@@ -120,7 +121,7 @@ div.package-header>ul.flags {
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: transparent transparent #000 transparent;
+  border-color: transparent transparent #000;
 }
 
 .flag-infobulle:hover span {
@@ -164,6 +165,7 @@ div.package-header>.links div>a {
 div.package-header>.links div>a:hover {
   text-decoration: underline;
 }
+
 /**
  * LINKS END
  */
diff --git a/public/components/package/package.css b/public/components/package/package.css
index 9ea497fa..1247c66d 100644
--- a/public/components/package/package.css
+++ b/public/components/package/package.css
@@ -8,15 +8,14 @@
 section#package-info {
   height: 100vh;
   width: 400px;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   background: var(--primary-darker);
   padding: 15px;
   flex-direction: column;
   z-index: 20;
   position: absolute;
   transform: translateX(-100%);
-  -webkit-transform: translateX(-100%);
 }
 
 body.dark section#package-info {
@@ -26,18 +25,26 @@ body.dark section#package-info {
 section#package-info .package-container {
   margin-bottom: 40px;
   padding: 10px;
-  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(76, 50, 223, 0.2) 100%);
-  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(76, 50, 223, 0.2) 100%);
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(76, 50, 223, 0.2) 100%);
+  background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(76 50 223 / 20%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#334c32df', GradientType=0);
   border-radius: 0 0 8px 8px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   height: calc(100vh - 315px);
 }
 
 section#package-info>.package-navigation>div {
-  font-family: 'mononoki';
+  font-family: mononoki;
+  width: 45px;
+  height: 45px;
+  position: relative;
+  border-radius: 55px;
+  box-sizing: border-box;
+  background: var(--primary);
+  border: 2px solid #4c32df6b;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.5s ease;
 }
 
 /**
@@ -52,9 +59,7 @@ section#package-info>.package-navigation {
   padding-top: 40px;
   padding-bottom: 10px;
   border-radius: 8px 8px 0 0;
-  background: -moz-linear-gradient(top, rgba(76, 50, 223, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(top, rgba(76, 50, 223, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to bottom, rgba(76, 50, 223, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(to bottom, rgb(76 50 223 / 20%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#334c32df', endColorstr='#00000000', GradientType=0);
 }
 
@@ -64,7 +69,7 @@ section#package-info>.package-navigation {
   width: 100%;
   color: var(--secondary);
   margin-bottom: 10px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   letter-spacing: 1px;
   text-shadow: 1px 1px 5px #2a6f99;
   position: absolute;
@@ -72,21 +77,7 @@ section#package-info>.package-navigation {
   top: 10px;
 }
 
-section#package-info>.package-navigation>div {
-  width: 45px;
-  height: 45px;
-  position: relative;
-  border-radius: 55px;
-  box-sizing: border-box;
-  background: var(--primary);
-  border: 2px solid #4c32df6b;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.5s ease;
-}
-
-section#package-info>.package-navigation>div:not(.active):not(.disabled):hover {
+section#package-info>.package-navigation>div:not(.active, .disabled):hover {
   cursor: pointer;
   background: #311B92;
 }
@@ -101,7 +92,7 @@ section#package-info>.package-navigation>div.disabled {
   opacity: 0.3;
 }
 
-section#package-info>.package-navigation>div.active:before {
+section#package-info>.package-navigation>div.active::before {
   content: "";
   position: absolute;
   bottom: -17px;
@@ -118,7 +109,7 @@ section#package-info>.package-navigation>div>.signal {
   bottom: -2px;
   right: -2px;
   font-size: 12px;
-  font-family: "mononoki";
+  font-family: mononoki;
   background: #FBC02D;
   color: #000 !important;
   border-radius: 100%;
@@ -137,18 +128,22 @@ section#package-info>.package-navigation>div#scorecard-menu.red {
   border: 2px solid #EF5350;
   color: #FF80AB;
 }
+
 section#package-info>.package-navigation>div#scorecard-menu.orange {
   border: 2px solid #FDD835;
   color: #FFD740;
 }
+
 section#package-info>.package-navigation>div#scorecard-menu.blue {
   border: 2px solid #2962FF;
   color: #BBDEFB;
 }
+
 section#package-info>.package-navigation>div#scorecard-menu.green {
   border: 2px solid #00E676;
   color: #B2FF59;
 }
+
 /**
  * NAVIGATION END
  */
@@ -167,16 +162,17 @@ section#package-info .head-title {
 }
 
 section#package-info .head-title.no-margin {
-  margin-top: 0px;
+  margin-top: 0;
 }
 
 section#package-info .head-title>p {
-  text-shadow: 1px 1px 5px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 5px rgb(20 20 20 / 50%);
   font-size: 18px;
   font-variant: small-caps;
+
   /* lowercase is needed with small-caps font variant */
   text-transform: lowercase;
-  font-family: "mononoki";
+  font-family: mononoki;
   font-weight: bold;
   letter-spacing: 1px;
   padding: 0 10px;
@@ -189,7 +185,7 @@ section#package-info .head-title>span {
   padding: 2px 5px;
   border-radius: 4px;
   font-size: 12px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   text-shadow: 2px 2px 5px #000000d4;
   transition: all 0.5s ease;
   cursor: pointer;
@@ -209,7 +205,7 @@ section#package-info .head-title>span.active:not(.disabled):hover {
   background: #0068ff;
 }
 
-section#package-info .head-title>span:not(.disabled):not(.active):hover {
+section#package-info .head-title>span:not(.disabled, .active):hover {
   background: #7900ff;
 }
 
@@ -248,6 +244,8 @@ section#package-info .list-item>span {
   justify-content: center;
   flex-grow: 1;
   color: #CFD8DC;
+  margin-left: 5px;
+  margin-top: 5px;
 }
 
 section#package-info .list-item>span:not(.expandable).clickable:hover {
@@ -261,11 +259,6 @@ section#package-info .list-item.line>span {
   justify-content: start;
 }
 
-section#package-info .list-item>span {
-  margin-left: 5px;
-  margin-top: 5px;
-}
-
 /**
  * ANOTHER LIST OF ITEMS
  */
@@ -348,6 +341,7 @@ section#package-info ul li.clickable:hover {
   text-decoration: underline;
   font-weight: bold;
 }
+
 /**
  * HELP DIALOG END
  */
diff --git a/public/components/package/pannels/overview/overview.css b/public/components/package/pannels/overview/overview.css
index 19ca1a34..c1d0b92e 100644
--- a/public/components/package/pannels/overview/overview.css
+++ b/public/components/package/pannels/overview/overview.css
@@ -11,11 +11,11 @@ div.package-maintainers>div {
   box-sizing: border-box;
   border-radius: 4px;
   overflow: hidden;
-  background: linear-gradient(to right, rgb(43 68 137) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(43 68 137) 0%, rgb(255 255 255 / 0%) 100%);
 }
 
 div.package-maintainers>div.clickable:hover {
-  background: linear-gradient(to right, rgb(43, 87, 137) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(43 87 137) 0%, rgb(255 255 255 / 0%) 100%);
   cursor: pointer;
   color: yellow;
 }
@@ -29,14 +29,14 @@ div.package-maintainers>div>p {
   flex-grow: 1;
   display: flex;
   align-items: center;
-  font-family: "mononoki";
+  font-family: mononoki;
 }
 
 div.package-maintainers>div>span {
   margin-left: 6px;
   display: flex;
   align-items: center;
-  font-family: "mononoki";
+  font-family: mononoki;
   min-width: 76px;
   padding-right: 10px;
   justify-content: flex-end;
diff --git a/public/components/package/pannels/scorecard/scorecard.css b/public/components/package/pannels/scorecard/scorecard.css
index d0ec1e0e..4f7b37a5 100644
--- a/public/components/package/pannels/scorecard/scorecard.css
+++ b/public/components/package/pannels/scorecard/scorecard.css
@@ -1,9 +1,7 @@
 #pan-scorecard {
   padding: 10px;
   border-radius: 8px 8px 0 0;
-  background: -moz-linear-gradient(top, rgba(76, 50, 223, 0.2) 0%, rgba(0, 0, 0, 0) 15%);
-  background: -webkit-linear-gradient(top, rgba(76, 50, 223, 0.2) 0%, rgba(0, 0, 0, 0) 15%);
-  background: linear-gradient(to bottom, rgba(76, 50, 223, 0.2) 0%, rgba(0, 0, 0, 0) 15%);
+  background: linear-gradient(to bottom, rgb(76 50 223 / 20%) 0%, rgb(0 0 0 / 0%) 15%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#334c32df', endColorstr='#00000000', GradientType=0);
 }
 
@@ -13,7 +11,7 @@
   width: 100%;
   color: var(--secondary);
   margin-bottom: 10px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   letter-spacing: 1px;
   text-shadow: 1px 1px 5px #2a6f99;
   position: static;
@@ -30,13 +28,13 @@
 }
 
 #pan-scorecard .score-header .score-text {
-  font-family: 'mononoki';
+  font-family: mononoki;
   font-size: 16px;
   margin-top: 5px;
 }
 
 #pan-scorecard .score-header .score-value {
-  font-weight: 800px;
+  font-weight: 800;
   color: var(--secondary);
   margin-top: 6px;
   font-size: 18px;
@@ -50,6 +48,7 @@
 #pan-scorecard .score-header .visualizer .logo {
   vertical-align: sub;
   width: 21px;
+
   /* https://codepen.io/sosuke/pen/Pjoqqp */
   filter: invert(99%) sepia(36%) saturate(748%) hue-rotate(170deg) brightness(93%) contrast(84%);
 }
@@ -68,7 +67,7 @@
   height: auto;
 }
 
-#pan-scorecard .check:before {
+#pan-scorecard .check::before {
   content: '▶';
   padding: 4px;
   width: 20px;
@@ -76,7 +75,7 @@
   font-size: 11px;
 }
 
-#pan-scorecard .check.visible:before {
+#pan-scorecard .check.visible::before {
   content: '▼';
 }
 
@@ -126,5 +125,5 @@
 
 #pan-scorecard .score {
   margin-left: auto;
-  font-family: 'mononoki';
+  font-family: mononoki;
 }
diff --git a/public/components/package/pannels/scripts/scripts.css b/public/components/package/pannels/scripts/scripts.css
index ac2f57cc..ba3be77f 100644
--- a/public/components/package/pannels/scripts/scripts.css
+++ b/public/components/package/pannels/scripts/scripts.css
@@ -17,7 +17,7 @@
 }
 
 .package-scripts .script:nth-child(even) {
-  background: rgba(150, 100, 150, 0.05);
+  background: rgb(150 100 150 / 5%);
 }
 
 .package-scripts .script+.script {
@@ -39,6 +39,6 @@
 .package-scripts .script p.value {
   font-size: 13px;
   color: #f3e4f8;
-  font-family: 'mononoki';
+  font-family: mononoki;
   margin-top: 5px;
 }
diff --git a/public/components/package/pannels/vulnerabilities/vulnerabilities.css b/public/components/package/pannels/vulnerabilities/vulnerabilities.css
index 2f36017d..995e49a4 100644
--- a/public/components/package/pannels/vulnerabilities/vulnerabilities.css
+++ b/public/components/package/pannels/vulnerabilities/vulnerabilities.css
@@ -33,7 +33,7 @@
 }
 
 .vuln-strategy .name {
-  font-family: "mononoki";
+  font-family: mononoki;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 20px;
@@ -56,6 +56,7 @@
   color: #FFF;
   display: flex;
   flex-direction: column;
+  padding: 10px;
 }
 
 .packages-vuln .vuln+.vuln {
@@ -64,44 +65,30 @@
 
 .packages-vuln .vuln.critical {
   border-color: #B71C1C;
-  background: -moz-linear-gradient(left, rgba(63, 0, 6, 0.53) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(left, rgba(63, 0, 6, 0.53) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to right, rgba(63, 0, 6, 0.53) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(to right, rgb(63 0 6 / 53%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#873f0006', endColorstr='#00000000', GradientType=1);
 }
 
 .packages-vuln .vuln.high {
-  border-color: rgb(249, 104, 37);
-  background: -moz-linear-gradient(left, rgba(53, 38, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(left, rgba(53, 38, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to right, rgba(53, 38, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
+  border-color: rgb(249 104 37);
+  background: linear-gradient(to right, rgb(53 38 0 / 65%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6352600', endColorstr='#00000000', GradientType=1);
 }
 
 .packages-vuln .vuln.medium,
 .packages-vuln .vuln.moderate {
   border-color: #F9A825;
-  background: -moz-linear-gradient(left, rgba(65, 66, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(left, rgba(65, 66, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to right, rgba(65, 66, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(to right, rgb(65 66 0 / 65%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6414200', endColorstr='#00000000', GradientType=1);
 }
 
 .packages-vuln .vuln.info,
 .packages-vuln .vuln.low {
   border-color: #2545f9;
-  background: -moz-linear-gradient(left, rgba(0, 46, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
-  background: -webkit-linear-gradient(left, rgba(0, 46, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
-  background: linear-gradient(to right, rgba(0, 46, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(to right, rgb(0 46 63 / 65%) 0%, rgb(0 0 0 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6002e3f', endColorstr='#00000000', GradientType=1);
 }
 
-.packages-vuln .vuln {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-}
-
 .packages-vuln .vuln>div {
   display: flex;
   height: 24px;
@@ -152,7 +139,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: 'mononoki';
+  font-family: mononoki;
   font-weight: bold;
   text-shadow: 2px 2px 10px #000;
   color: #FFF;
@@ -167,7 +154,7 @@
 }
 
 .packages-vuln .vuln>div>p.name {
-  font-family: "mononoki";
+  font-family: mononoki;
   font-size: 16px;
   color: #FFF;
 }
@@ -177,7 +164,7 @@
   background: #0000005c;
   padding: 4px 5px;
   margin-right: 10px;
-  font-family: "mononoki";
+  font-family: mononoki;
   font-size: 12px;
   border-radius: 4px;
 }
@@ -193,7 +180,7 @@
 }
 
 .packages-vuln .vuln>div .severity.high {
-  background: rgb(249, 104, 37);
+  background: rgb(249 104 37);
 }
 
 .packages-vuln .vuln>div .severity.medium,
diff --git a/public/components/package/pannels/warnings/warnings.css b/public/components/package/pannels/warnings/warnings.css
index 762533ca..f096bdd0 100644
--- a/public/components/package/pannels/warnings/warnings.css
+++ b/public/components/package/pannels/warnings/warnings.css
@@ -12,7 +12,7 @@
   border-radius: 4px;
   text-align: left;
   font-size: 14px;
-  font-family: "mononoki";
+  font-family: mononoki;
   letter-spacing: 0.5px;
   word-wrap: break-word;
 }
@@ -21,7 +21,7 @@
   background: white;
   margin: 0;
   padding: 0;
-  box-shadow:  0px 5px 3px rgba(0, 0, 0, 0.2);
+  box-shadow:  0 5px 3px rgb(0 0 0 / 20%);
 }
 
 .package-code code {
@@ -35,7 +35,7 @@
 .package-code pre div.file {
   padding: 8px;
   text-align: right;
-  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(232,232,232,1) 100%);
+  background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%,rgb(232 232 232 / 100%) 100%);
   margin-bottom: 5px;
 }
 
@@ -46,17 +46,12 @@
 
 .relevant-line {
   background: rgb(255 221 124 / 27%);
-  padding: 2px 0px;
+  padding: 2px 0;
 }
 
 .hljs-ln-numbers {
   -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-
   text-align: center;
   color: #ccc;
   border-right: 1px solid #CCC;
diff --git a/public/components/popup/popup.css b/public/components/popup/popup.css
index 642ed0c7..84127ab5 100644
--- a/public/components/popup/popup.css
+++ b/public/components/popup/popup.css
@@ -10,9 +10,9 @@ section#popup--background {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* pointer-events: none; */
-  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgb(30 35 65) 100%);
 
+  /* pointer-events: none; */
+  background: radial-gradient(ellipse at center, rgb(255 255 255 / 0%) 0%, rgb(30 35 65) 100%);
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.35s ease-in, visibility 0ms ease-in 0.35s;
@@ -29,7 +29,7 @@ section#popup--background>.popup {
   background: #f5f4f4;
   border-radius: 4px;
   box-shadow: 5px 5px 15px rgb(23 27 129 / 41%);
-  border-left: 2px solid #ffffff;
+  border-left: 2px solid #fff;
   border-top: 2px solid #FFF;
 }
 
diff --git a/public/components/searchbar/searchbar.css b/public/components/searchbar/searchbar.css
index e9070b8b..25317c07 100644
--- a/public/components/searchbar/searchbar.css
+++ b/public/components/searchbar/searchbar.css
@@ -25,7 +25,7 @@
   align-items: center;
   border-radius: 2px;
   font-size: 14px;
-  font-family: "roboto";
+  font-family: roboto;
   color: #B3E5FC;
   font-weight: bold;
 }
@@ -35,7 +35,7 @@
   background: #37474F;
   border-radius: 3px;
   font-size: 13px;
-  font-family: "mononoki";
+  font-family: mononoki;
   display: flex;
 }
 
@@ -53,7 +53,7 @@
   border: none;
   outline: none;
   color: #FFF;
-  font-family: "mononoki";
+  font-family: mononoki;
   margin-bottom: 2px;
 }
 
@@ -79,10 +79,9 @@ div.search-result-background {
   max-width: 400px;
   padding: 10px !important;
   background: #263238;
-  box-shadow: 1px 1px 10px rgba(20, 20, 20, 0.4);
+  box-shadow: 1px 1px 10px rgb(20 20 20 / 40%);
   border-radius: 4px;
   box-sizing: border-box;
-  padding: 15px;
   flex-direction: column;
 }
 
@@ -103,7 +102,7 @@ div.search-result-pannel>.helpers {
   border-bottom: 1px solid #37474F;
   padding-bottom: 10px;
   margin-bottom: 10px;
-  font-family: "mononoki";
+  font-family: mononoki;
 }
 
 div.search-result-pannel>.helpers.hide {
@@ -115,7 +114,6 @@ div.search-result-pannel>.helpers>.title {
   align-items: center;
   font-size: 14px;
   font-weight: bold;
-  margin-bottom: 3px;
   color: #ECEFF1;
   margin-bottom: 10px;
 }
@@ -161,13 +159,13 @@ div.search-result-pannel>.helpers>.line p {
 }
 
 div.search-result-pannel .package {
-  background: rgba(69, 90, 100, 0.198);
+  background: rgb(69 90 100 / 19.8%);
   align-items: center;
   border-radius: 2px;
   padding: 10px;
   display: flex;
   flex-shrink: 0;
-  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
   font-size: 14px;
   letter-spacing: 0.7px;
   margin-right: 2px;
@@ -223,11 +221,11 @@ body.dark #search-nav {
 
 #search-nav .search-result-pannel .package {
   height: 30px;
-  color: rgb(229, 229, 229);
+  color: rgb(229 229 229);
   display: flex;
   align-items: center;
   padding: 0 10px;
-  font-family: "Roboto";
+  font-family: Roboto;
 }
 
 #search-nav .packages {
@@ -239,11 +237,10 @@ body.dark #search-nav {
 
 #search-nav .packages>.package {
   height: inherit;
-  color: rgb(229, 229, 229);
-  font-family: "mononoki";
+  font-family: mononoki;
   display: flex;
   align-items: center;
-  background: linear-gradient(to right,  rgba(55,34,175,1) 0%,rgba(87,74,173,1) 50%,rgb(59, 110, 205) 100%);
+  background: linear-gradient(to right,  rgb(55 34 175 / 100%) 0%,rgb(87 74 173 / 100%) 50%,rgb(59 110 205) 100%);
   padding: 0 10px;
   border-right: 2px solid #0f041a;
   text-shadow: 1px 1px 10px #000;
@@ -251,7 +248,7 @@ body.dark #search-nav {
 }
 
 body.dark #search-nav .packages>.package {
-  background: linear-gradient(to right, rgba(11,3,31,1) 0%, rgba(11,3,31, 0.8) 50%, rgba(11, 3, 31, 0.6) 100%);
+  background: linear-gradient(to right, rgb(11 3 31 / 100%) 0%, rgb(11 3 31 / 80%) 50%, rgb(11 3 31 / 60%) 100%);
 }
 
 #search-nav .packages>.package>* {
@@ -263,17 +260,17 @@ body.dark #search-nav .packages>.package {
 }
 
 #search-nav .packages>.package:not(.active):hover {
-  background: linear-gradient(to right, rgba(55, 34, 175, 1) 1%, rgb(68, 121, 218) 100%);
+  background: linear-gradient(to right, rgb(55 34 175 / 100%) 1%, rgb(68 121 218) 100%);
   color: #defff9;
   cursor: pointer;
 }
 
 body.dark #search-nav .packages>.package:not(.active):hover {
-  background: linear-gradient(to right, rgba(11, 3, 31, 0.7) 1%, rgba(11, 3, 31, 0.5) 100%);
+  background: linear-gradient(to right, rgb(11 3 31 / 70%) 1%, rgb(11 3 31 / 50%) 100%);
 }
 
 #search-nav .packages>.package.active {
-  background: linear-gradient(to right,  rgba(55,34,175,1) 0%,rgba(87,74,173,1) 50%,rgb(59, 110, 205) 100%);
+  background: linear-gradient(to right,  rgb(55 34 175 / 100%) 0%,rgb(87 74 173 / 100%) 50%,rgb(59 110 205) 100%);
 }
 
 #search-nav .packages>.package.active>b {
@@ -295,13 +292,12 @@ body.dark #search-nav .packages>.package:not(.active):hover {
   background: var(--secondary-darker);
   padding: 3px 5px;
   border-radius: 2px;
-  font-family: "Roboto";
+  font-family: Roboto;
   letter-spacing: 1px;
 }
 
 #search-nav .add {
   height: inherit;
-  color: white;
   font-size: 20px;
   border: none;
   background: var(--secondary-darker);
diff --git a/public/components/views/home/home.css b/public/components/views/home/home.css
index 765ac35d..639aae40 100644
--- a/public/components/views/home/home.css
+++ b/public/components/views/home/home.css
@@ -6,8 +6,7 @@
   flex-direction: column;
   padding: 60px;
   box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
 }
 
 #home--view .home--header {
@@ -26,7 +25,7 @@
   margin-left: 40px;
   overflow: hidden;
   border-radius: 4px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   letter-spacing: 1px;
   cursor: pointer;
 }
@@ -97,7 +96,7 @@
   height: 40px;
   align-items: center;
   font-size: 28px;
-  font-family: "mononoki";
+  font-family: mononoki;
   border-bottom: 2px solid #cecec9;
 }
 
@@ -153,7 +152,7 @@ body.dark .home--header--title .bottom #project-description {
   display: flex;
   align-items: center;
   color: #425964;
-  font-family: "mononoki";
+  font-family: mononoki;
   letter-spacing: 0.5px;
 }
 
@@ -202,25 +201,25 @@ body.dark .home--header--title .bottom>ul li {
 #home--view .home--body .module>.title {
   height: 34px;
   display: flex;
-  background: rgb(55, 34, 175);
-  background: -moz-linear-gradient(-45deg, rgba(55, 34, 175, 1) 0%, rgba(55, 34, 175, 1) 48%, rgba(90, 68, 218, 1) 75%, rgba(90, 68, 218, 1) 100%);
-  background: -webkit-linear-gradient(-45deg, rgba(55, 34, 175, 1) 0%, rgba(55, 34, 175, 1) 48%, rgba(90, 68, 218, 1) 75%, rgba(90, 68, 218, 1) 100%);
-  background: linear-gradient(135deg, rgba(55, 34, 175, 1) 0%, rgba(55, 34, 175, 1) 48%, rgba(90, 68, 218, 1) 75%, rgba(90, 68, 218, 1) 100%);
+  background: rgb(55 34 175);
+  background: linear-gradient(-45deg, rgb(55 34 175 / 100%) 0%, rgb(55 34 175 / 100%) 48%, rgb(90 68 218 / 100%) 75%, rgb(90 68 218 / 100%) 100%);
+  background: linear-gradient(-45deg, rgb(55 34 175 / 100%) 0%, rgb(55 34 175 / 100%) 48%, rgb(90 68 218 / 100%) 75%, rgb(90 68 218 / 100%) 100%);
+  background: linear-gradient(135deg, rgb(55 34 175 / 100%) 0%, rgb(55 34 175 / 100%) 48%, rgb(90 68 218 / 100%) 75%, rgb(90 68 218 / 100%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3722af', endColorstr='#5a44da', GradientType=1);
   margin-bottom: 10px;
   box-sizing: border-box;
   border-radius: 4px;
   padding: 0 10px;
   align-items: center;
-  font-family: "mononoki";
+  font-family: mononoki;
   text-shadow: 1px 1px 10px #05a0ff6b;
 }
 
 #home--view .home--body .module>.title.warning {
-  background: rgb(183, 28, 28);
-  background: -moz-linear-gradient(-45deg, rgba(183, 28, 28, 1) 0%, rgba(183, 28, 28, 1) 48%, rgba(229, 57, 53, 1) 75%, rgba(229, 57, 53, 1) 100%);
-  background: -webkit-linear-gradient(-45deg, rgba(183, 28, 28, 1) 0%, rgba(183, 28, 28, 1) 48%, rgba(229, 57, 53, 1) 75%, rgba(229, 57, 53, 1) 100%);
-  background: linear-gradient(135deg, rgba(183, 28, 28, 1) 0%, rgba(183, 28, 28, 1) 48%, rgba(229, 57, 53, 1) 75%, rgba(229, 57, 53, 1) 100%);
+  background: rgb(183 28 28);
+  background: linear-gradient(-45deg, rgb(183 28 28 / 100%) 0%, rgb(183 28 28 / 100%) 48%, rgb(229 57 53 / 100%) 75%, rgb(229 57 53 / 100%) 100%);
+  background: linear-gradient(-45deg, rgb(183 28 28 / 100%) 0%, rgb(183 28 28 / 100%) 48%, rgb(229 57 53 / 100%) 75%, rgb(229 57 53 / 100%) 100%);
+  background: linear-gradient(135deg, rgb(183 28 28 / 100%) 0%, rgb(183 28 28 / 100%) 48%, rgb(229 57 53 / 100%) 75%, rgb(229 57 53 / 100%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b71c1c', endColorstr='#e53935', GradientType=1);
 }
 
@@ -232,7 +231,6 @@ body.dark .home--header--title .bottom>ul li {
   align-items: center;
   justify-content: center;
   background: #FDD835;
-  font-size: 14px;
   margin-left: 10px;
   color: #263238;
   font-size: 12px;
@@ -258,7 +256,7 @@ body.dark .home--header--title .bottom>ul li {
   align-items: center;
   justify-content: center;
   height: 40px;
-  font-family: "system-ui";
+  font-family: system-ui;
   font-weight: 500;
   letter-spacing: 1.1px;
   padding: 10px;
@@ -281,14 +279,14 @@ body.dark #home--view .home--body .module>.content>p {
 .home--warnings>p {
   padding: 10px;
   border-left: 2px solid #da4e44;
-  background: linear-gradient(to right, rgb(231, 206, 195) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(231 206 195) 0%, rgb(255 255 255 / 0%) 100%);
   color: #992323;
   border-radius: 4px;
 }
 
 body.dark .home--warnings>p {
-  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.7) 100%);
-  color: rgb(253, 210, 210);
+  background: linear-gradient(to right, rgb(11 3 31) 0%, rgb(46 10 10 / 70%) 100%);
+  color: rgb(253 210 210);
 }
 
 .home--warnings>p+p {
@@ -341,7 +339,7 @@ body.dark .home--overview>div {
 }
 
 .home--overview>div>span {
-  font-family: "mononoki";
+  font-family: mononoki;
   font-size: 18px;
   color: var(--secondary-darker);
   margin-top: 10px;
@@ -359,14 +357,14 @@ body.dark .home--overview>div>span {
 }
 
 .home--packages--overview>div {
-  background: linear-gradient(to right, rgb(231 216 195) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(231 216 195) 0%, rgb(255 255 255 / 0%) 100%);
   display: flex;
   align-items: center;
   padding: 5px 10px;
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  font-family: "mononoki";
+  font-family: mononoki;
   margin-left: 10px;
   margin-top: 10px;
   border-left: 2px solid #da9744;
@@ -377,19 +375,19 @@ body.dark .home--overview>div>span {
 }
 
 body.dark .home--packages--overview>div {
-  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.8) 100%);
-  color: rgb(253, 210, 210);
+  background: linear-gradient(to right, rgb(11 3 31) 0%, rgb(46 10 10 / 80%) 100%);
+  color: rgb(253 210 210);
 }
 
 .home--packages--overview>div:hover {
   border-color: #da4e44;
   cursor: pointer;
-  background: linear-gradient(to right, rgb(231, 206, 195) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(231 206 195) 0%, rgb(255 255 255 / 0%) 100%);
 }
 
 body.dark .home--packages--overview>div:hover {
   border-color: #da4e44;
-  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.8) 100%);
+  background: linear-gradient(to right, rgb(11 3 31) 0%, rgb(46 10 10 / 80%) 100%);
 }
 
 .home--packages--overview>div span {
@@ -405,15 +403,15 @@ body.dark .home--packages--overview>div span {
   margin-left: auto;
   display: flex;
   font-size: 15px;
-  font-family: 'Roboto';
+  font-family: Roboto;
   font-weight: 500;
 }
 
 .home--packages--overview>div>div.chips>p {
   padding: 5px;
-  background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(232, 232, 232, 1) 100%);
+  background: linear-gradient(to bottom, rgb(252 252 252 / 100%) 0%, rgb(232 232 232 / 100%) 100%);
   border-radius: 4px;
-  box-shadow: 2px 2px 6px 0px #71060633;
+  box-shadow: 2px 2px 6px 0 #71060633;
   border: 1px solid #8f0e0e54;
   color: #611717;
 }
@@ -421,7 +419,7 @@ body.dark .home--packages--overview>div span {
 body.dark .home--packages--overview>div>div.chips>p {
   background: linear-gradient(to bottom, rgb(75 22 22) 0%, rgb(26 5 5) 100%);
   color: #f5c6c6;
-  box-shadow: 2px 2px 6px 0px #0e01019e;
+  box-shadow: 2px 2px 6px 0 #0e01019e;
 }
 
 .home--packages--overview>div>div.chips>p+p {
diff --git a/public/components/views/home/maintainers/maintainers.css b/public/components/views/home/maintainers/maintainers.css
index 38f28a60..547b7396 100644
--- a/public/components/views/home/maintainers/maintainers.css
+++ b/public/components/views/home/maintainers/maintainers.css
@@ -16,7 +16,7 @@
   overflow: hidden;
   margin-left: 10px;
   margin-top: 10px;
-  box-shadow: 1px 1px 4px 0px #271e792b;
+  box-shadow: 1px 1px 4px 0 #271e792b;
   color: #546884;
   flex-grow: 1;
 }
@@ -27,11 +27,11 @@ body.dark .home--maintainers>.person {
 }
 
 .home--maintainers> .highlighted{
-  background: linear-gradient(to bottom, rgb(230, 240, 250) 0%, rgb(220, 235, 245) 100%);
+  background: linear-gradient(to bottom, rgb(230 240 250) 0%, rgb(220 235 245) 100%);
 }
 
 body.dark .home--maintainers > .highlighted {
-  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.8) 100%);
+  background: linear-gradient(to right, rgb(11 3 31) 0%, rgb(46 10 10 / 80%) 100%);
 }
 
 .home--maintainers>.person:hover {
@@ -58,7 +58,7 @@ body.dark .home--maintainers > .highlighted {
   justify-content: center;
   margin-left: 10px;
   font-size: 15px;
-  font-family: "mononoki";
+  font-family: mononoki;
   flex-grow: 1;
   margin-right: 10px;
 }
@@ -73,7 +73,7 @@ body.dark .home--maintainers > .highlighted {
 .home--maintainers>.person>div.packagescount {
   display: flex;
   align-items: center;
-  font-family: "mononoki";
+  font-family: mononoki;
   font-size: 18px;
   margin-right: 15px;
   flex-basis: 40px;
@@ -107,12 +107,10 @@ body.dark .home--maintainers > .highlighted {
 .maintainers--popup>.header>.avatar {
   width: 80px;
   overflow: hidden;
-  border-radius: 4px;
-  overflow: hidden;
   flex-shrink: 0;
   border-radius: 8px;
   box-sizing: border-box;
-  box-shadow: 2px 2px 6px 0px #00000012;
+  box-shadow: 2px 2px 6px 0 #00000012;
 }
 
 .maintainers--popup>.header>.avatar>img {
@@ -124,7 +122,7 @@ body.dark .home--maintainers > .highlighted {
   flex-direction: column;
   flex-grow: 1;
   justify-content: center;
-  font-family: "mononoki";
+  font-family: mononoki;
   margin: 0 10px;
 }
 
@@ -162,7 +160,7 @@ body.dark .maintainers--popup>.header>.informations>p.email {
   background-color: var(--secondary-darker);
   border-radius: 100%;
   color: #FFF;
-  box-shadow: 2px 2px 6px 0px #00000012;
+  box-shadow: 2px 2px 6px 0 #00000012;
 }
 
 .maintainers--popup>.header>.icons>i:hover {
@@ -191,7 +189,7 @@ body.dark .maintainers--popup>.separator {
 .maintainers--popup>.separator>p {
   background: #f5f4f4;
   padding: 0 10px;
-  font-family: "roboto";
+  font-family: roboto;
   font-weight: bold;
   letter-spacing: 1.2px;
   color: #255471;
@@ -206,8 +204,7 @@ body.dark .maintainers--popup>.separator>p {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   max-height: 240px;
   margin-top: 20px;
   margin-bottom: 10px;
@@ -218,17 +215,17 @@ body.dark .maintainers--popup>.separator>p {
   padding: 0 10px;
   display: flex;
   align-items: center;
-  background: linear-gradient(to right, rgb(221 229 251) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(221 229 251) 0%, rgb(255 255 255 / 0%) 100%);
   border-left: 2px solid #4480da;
   color: #234c99;
   border-radius: 4px;
-  font-family: "mononoki";
+  font-family: mononoki;
   flex-shrink: 0;
   font-size: 15px;
 }
 
 body.dark .maintainers--popup>ul li {
-  background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgba(28, 29, 58, 0.185) 100%);
+  background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgb(28 29 58 / 18.5%) 100%);
   border: none;
   color: white;
 }
@@ -261,8 +258,9 @@ body.dark .maintainers--popup>ul li>span{
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 2px 2px 6px 0px #00000012;
+  box-shadow: 2px 2px 6px 0 #00000012;
 }
+
 .maintainers--popup>ul li>i:hover {
   background: #4ab8b9;
   cursor: pointer;
diff --git a/public/components/views/home/report/report.css b/public/components/views/home/report/report.css
index 4cbecb43..ef650fc8 100644
--- a/public/components/views/home/report/report.css
+++ b/public/components/views/home/report/report.css
@@ -22,7 +22,7 @@ body.dark .report--popup>.title {
 .report--popup>.title>p {
   background: #f5f4f4;
   padding: 0 10px;
-  font-family: "roboto";
+  font-family: roboto;
   font-weight: bold;
   letter-spacing: 1.2px;
   color: #255471;
@@ -58,7 +58,7 @@ body.dark .report--popup>form label {
   border-left: 4px solid #546884;
   margin-bottom: 10px;
   border-radius: 2px;
-  box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.10);
+  box-shadow: 0 3px 7px 1px rgb(0 0 0 / 10%);
   font-size: 16px;
 }
 
diff --git a/public/components/views/network/network.css b/public/components/views/network/network.css
index 796404ee..48f0d7b9 100644
--- a/public/components/views/network/network.css
+++ b/public/components/views/network/network.css
@@ -37,9 +37,9 @@ body.dark #network--view.locked {
   margin-top: 10px;
   font-weight: bold;
   letter-spacing: 0.5px;
-  font-family: "mononoki";
+  font-family: mononoki;
   color: var(--primary-darker);
-  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  text-shadow: 1px 1px 1px rgb(20 20 20 / 50%);
 }
 
 body.dark #network-loader>p {
diff --git a/public/components/views/search/search.css b/public/components/views/search/search.css
index 641753c1..b260cc50 100644
--- a/public/components/views/search/search.css
+++ b/public/components/views/search/search.css
@@ -31,12 +31,12 @@
   border: none;
   font-size: 16px;
   width: 100%;
-  color: rgb(78, 76, 76);
+  color: rgb(78 76 76);
   outline: none;
 }
 
 .result-not-found {
-  color: rgb(78, 76, 76);
+  color: rgb(78 76 76);
   text-align: center;
 }
 
@@ -48,12 +48,11 @@
 }
 
 #search--view form input::placeholder {
-  color: rgb(125, 125, 125);
+  color: rgb(125 125 125);
   font-style: italic;
 }
 
 .result-container {
-  max-height: calc(100vh - 340px);
   overflow-y: auto;
   margin-top: 10px;
   border-radius: 4px;
@@ -62,7 +61,7 @@
 }
 
 .result-container::-webkit-scrollbar {
-  width: 0px !important;
+  width: 0 !important;
 }
 
 .result {
@@ -139,15 +138,17 @@ body.dark .result:not(:last-child) {
   margin-bottom: 10px;
   padding: 10px;
   border-radius: 4px;
-  background: linear-gradient(135deg, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(234, 238, 239, 1) 100%);
+  background: linear-gradient(135deg, rgb(242 245 246 / 100%) 0%, rgb(227 234 237 / 100%) 37%, rgb(234 238 239 / 100%) 100%);
   box-shadow: 2px 2px 20px #3722af1f;
   border: 1px solid #FFF;
   box-sizing: border-box;
   position: relative;
 }
+
 body.dark .form-group {
   background: var(--dark-theme-gray);
   border: 1px solid var(--primary-lighter);
+
   /* box-shadow: 2px 2px 20px var(--primary-darker); */
   box-shadow: 2px 2px 20px #5b44da6e;
 
@@ -157,7 +158,7 @@ body.dark .form-group {
 .form-group>input::placeholder,
 .form-group>input:-webkit-autofill {
   background-color: transparent;
-  font-family: "mononoki" !important;
+  font-family: mononoki !important;
   color: var(--primary-lighter) !important;
   font-style: normal !important;
 }
@@ -171,7 +172,7 @@ body.dark .form-group {
 .scan-info {
   height: 30px;
   color: #546884;
-  font-family: "mononoki";
+  font-family: mononoki;
   margin-top: 10px;
 }
 
@@ -217,7 +218,7 @@ body.dark .spinner-small {
 }
 
 input:-webkit-autofill {
-  -webkit-background-clip: text;
+  background-clip: text;
 }
 
 .search-spinner {
@@ -241,17 +242,16 @@ input:-webkit-autofill {
   margin-left: 5px;
   padding: 0 5px;
   border-radius: 2px;
-  font-family: "Roboto";
+  font-family: Roboto;
   letter-spacing: 1px;
 }
 
 .package-result .description {
   font-size: 14px;
-  color: rgb(78, 76, 76);
+  color: rgb(78 76 76);
   margin-top: 5px;
   margin-bottom: 8px;
   line-height: 20px;
-  word-break: break-word;
   overflow-wrap: break-word;
 }
 
@@ -261,7 +261,6 @@ input:-webkit-autofill {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 5px 0;
   margin-top: 10px;
   background: #54688419;
   padding: 5px 10px;
@@ -312,7 +311,7 @@ body.dark .cache-packages, body.dark .recent-packages {
 }
 
 .cache-packages h1, .recent-packages h1 {
-  font-family: "mononoki";
+  font-family: mononoki;
   color: #546884;
 }
 
diff --git a/public/components/views/settings/settings.css b/public/components/views/settings/settings.css
index 8bccde74..2a4d08ce 100644
--- a/public/components/views/settings/settings.css
+++ b/public/components/views/settings/settings.css
@@ -15,7 +15,7 @@
   align-items: center;
   color: var(--primary);
   font-size: 24px;
-  font-family: 'mononoki';
+  font-family: mononoki;
 }
 
 body.dark #settings--view>h1, #settings--view h2 {
@@ -108,8 +108,8 @@ body.dark #settings--view .shortcuts label {
 
 #settings--view .shortcuts input:read-only {
   background: transparent;
-  border-color: rgb(168, 168, 168);
-  color: rgb(141, 140, 140);
+  border-color: rgb(168 168 168);
+  color: rgb(141 140 140);
   border-style: solid;
 }
 
@@ -176,15 +176,17 @@ button.save {
   margin-top: 30px;
   border: none;
   outline: none;
-  font-family: "mononoki";
+  font-family: mononoki;
   font-weight: bold;
   letter-spacing: 0.5px;
   text-shadow: 2px 2px 5px #00000061;
 }
+
 button.save.disabled {
   background: #334148;
   opacity: 0.35;
 }
+
 button.save:not(.disabled):hover {
   background-color: var(--secondary-darker);
   cursor: pointer;
@@ -195,7 +197,7 @@ select {
   border: 1px solid #B0BEC5;
   height: 30px;
   border-radius: 4px;
-  font-family: 'mononoki';
+  font-family: mononoki;
   color: #0c5a9b;
 }
 
diff --git a/public/components/wiki/wiki.css b/public/components/wiki/wiki.css
index 12a15273..89094366 100644
--- a/public/components/wiki/wiki.css
+++ b/public/components/wiki/wiki.css
@@ -7,10 +7,9 @@
   top: 10%;
   z-index: 30;
   transform: translateX(calc(100% - 26px));
-  -webkit-transform: translateX(calc(100% - 26px));
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (width <= 1200px) {
   #documentation-root-element {
     width: 600px;
   }
@@ -28,6 +27,7 @@
     align-items: center;
     justify-content: center;
   }
+
   #documentation-root-element > .open-button:hover {
     cursor: pointer;
     background: var(--primary-lighter);
@@ -40,6 +40,6 @@
     border-top: 2px solid var(--primary);
     border-bottom: 2px solid var(--primary);
     overflow: hidden;
-    box-shadow: 2px 2px 30px rgba(20, 20, 20, 0.8);
+    box-shadow: 2px 2px 30px rgb(20 20 20 / 80%);
     width: 100%;
   }
diff --git a/public/css/animation.css b/public/css/animation.css
index 1203a550..7134143d 100644
--- a/public/css/animation.css
+++ b/public/css/animation.css
@@ -5,6 +5,7 @@
   width: 80px;
   height: 80px;
 }
+
 .lds-ellipsis div {
   position: absolute;
   top: 33px;
@@ -14,45 +15,56 @@
   background: var(--primary);
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
+
 body.dark .lds-ellipsis div {
   background: var(--dark-theme-accent-lighter);
 }
+
 .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);
   }
@@ -60,17 +72,14 @@ body.dark .lds-ellipsis div {
 
 .slide-in {
   animation: slide-in 0.8s forwards;
-  -webkit-animation: slide-in 0.8s forwards;
 }
 
 .slide-out {
   animation: slide-out 0.8s forwards;
-  -webkit-animation: slide-out 0.8s forwards;
 }
 
 .slide-out-documentation {
   animation: slide-out-documentation 0.8s forwards;
-  -webkit-animation: slide-out-documentation 0.8s forwards;
 }
 
 @keyframes slide-in {
diff --git a/public/css/light.css b/public/css/light.css
index 66485e35..c6cda34c 100644
--- a/public/css/light.css
+++ b/public/css/light.css
@@ -16,12 +16,12 @@
   --dark-theme-accent-color: #8d7afc;
   --dark-theme-gray: #191a38;
 }
+
 body {
   color: var(--primary-theme-color);
-  background: rgb(255,255,255);
-  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 15%, rgba(208,220,221,1) 100%);
-  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 15%,rgba(208,220,221,1) 100%);
-  background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 15%,rgba(208,220,221,1) 100%);
+  background: rgb(255 255 255);
+  background: radial-gradient(ellipse at center,  rgb(255 255 255 / 100%) 15%,rgb(208 220 221 / 100%) 100%);
+  background: radial-gradient(ellipse at center,  rgb(255 255 255 / 100%) 15%,rgb(208 220 221 / 100%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0dcdd',GradientType=1 );
 }
 
diff --git a/public/css/reset.css b/public/css/reset.css
index 248d577e..cc446d08 100644
--- a/public/css/reset.css
+++ b/public/css/reset.css
@@ -86,8 +86,8 @@ video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
   font: inherit;
+  font-size: 100%;
 }
 
 /* HTML5 display-role reset for older browsers */
@@ -119,10 +119,10 @@ q {
   quotes: none;
 }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
   content: '';
   content: none;
 }
diff --git a/public/font/fontello/fontello.css b/public/font/fontello/fontello.css
index d8467a08..c00a107c 100644
--- a/public/font/fontello/fontello.css
+++ b/public/font/fontello/fontello.css
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'fontello';
+  font-family: fontello;
   src: url('./fontello.eot?84631897');
   src: url('./fontello.eot?84631897#iefix') format('embedded-opentype'),
        url('./fontello.woff2?84631897') format('woff2'),
@@ -9,8 +9,11 @@
   font-weight: normal;
   font-style: normal;
 }
+
 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+
 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+
 /*
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
@@ -19,19 +22,19 @@
   }
 }
 */
-[class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "fontello";
+[class^="icon-"]::before, [class*=" icon-"]::before {
+  font-family: fontello;
   font-style: normal;
   font-weight: normal;
-
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
+
   /* opacity: .8; */
 
-  /* For safety - reset parent styles, that can break glyph codes*/
+  /* For safety - reset parent styles, that can break glyph codes */
   font-variant: normal;
   text-transform: none;
 
@@ -39,10 +42,12 @@
   line-height: 1em;
 
   /* Animation center compensation - margins should be symmetric */
+
   /* remove if not needed */
   margin-left: .2em;
 
   /* you can be more comfortable with increased icons size */
+
   /* font-size: 120%; */
 
   /* Font smoothing. That was taken from TWBS */
@@ -50,62 +55,63 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* Uncomment for 3D effect */
+
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.icon-eye:before { content: '\e800'; } /* '' */
-.icon-eye-off:before { content: '\e801'; } /* '' */
-.icon-chart-bar:before { content: '\e802'; } /* '' */
-.icon-chart-pie:before { content: '\e803'; } /* '' */
-.icon-chat:before { content: '\e804'; } /* '' */
-.icon-attention-circled:before { content: '\e805'; } /* '' */
-.icon-book-open:before { content: '\e806'; } /* '' */
-.icon-search:before { content: '\e807'; } /* '' */
-.icon-link:before { content: '\e808'; } /* '' */
-.icon-users:before { content: '\e809'; } /* '' */
-.icon-archive:before { content: '\e80a'; } /* '' */
-.icon-home:before { content: '\e80b'; } /* '' */
-.icon-star-empty:before { content: '\e80c'; } /* '' */
-.icon-star:before { content: '\e80d'; } /* '' */
-.icon-warning:before { content: '\e80e'; } /* '' */
-.icon-warning-empty:before { content: '\e80f'; } /* '' */
-.icon-users-1:before { content: '\e810'; } /* '' */
-.icon-doc:before { content: '\e811'; } /* '' */
-.icon-eye-1:before { content: '\e812'; } /* '' */
-.icon-eye-off-1:before { content: '\e813'; } /* '' */
-.icon-ok-circled:before { content: '\e814'; } /* '' */
-.icon-ok-circled2:before { content: '\e815'; } /* '' */
-.icon-cancel-circled:before { content: '\e816'; } /* '' */
-.icon-cancel-circled2:before { content: '\e817'; } /* '' */
-.icon-book:before { content: '\e818'; } /* '' */
-.icon-award:before { content: '\e819'; } /* '' */
-.icon-box-1:before { content: '\e81a'; } /* '' */
-.icon-vcard:before { content: '\e81b'; } /* '' */
-.icon-doc-text:before { content: '\e81c'; } /* '' */
-.icon-doc-text-inv:before { content: '\e81d'; } /* '' */
-.icon-vcard-1:before { content: '\e81e'; } /* '' */
-.icon-left-open-big:before { content: '\e81f'; } /* '' */
-.icon-bell-1:before { content: '\e820'; } /* '' */
-.icon-right-open-big:before { content: '\e821'; } /* '' */
-.icon-globe:before { content: '\e822'; } /* '' */
-.icon-cog:before { content: '\e823'; } /* '' */
-.icon-code:before { content: '\e824'; } /* '' */
-.icon-globe-alt-outline:before { content: '\e825'; } /* '' */
-.icon-globe-alt:before { content: '\e826'; } /* '' */
-.icon-lock:before { content: '\e827'; } /* '' */
-.icon-info-circled:before { content: '\f085'; } /* '' */
-.icon-info-circled-alt:before { content: '\f086'; } /* '' */
-.icon-docs:before { content: '\f0c5'; } /* '' */
-.icon-sitemap:before { content: '\f0e8'; } /* '' */
-.icon-plus-squared:before { content: '\f0fe'; } /* '' */
-.icon-terminal:before { content: '\f120'; } /* '' */
-.icon-fork:before { content: '\f126'; } /* '' */
-.icon-unlink:before { content: '\f127'; } /* '' */
-.icon-lock-open:before { content: '\f13e'; } /* '' */
-.icon-minus-squared:before { content: '\f146'; } /* '' */
-.icon-minus-squared-alt:before { content: '\f147'; } /* '' */
-.icon-doc-inv:before { content: '\f15b'; } /* '' */
-.icon-box:before { content: '\f187'; } /* '' */
-.icon-plus-squared-alt:before { content: '\f196'; } /* '' */
-.icon-cube:before { content: '\f1b2'; } /* '' */
-.icon-cubes:before { content: '\f1b3'; } /* '' */
+.icon-eye::before { content: '\e800'; } /* '' */
+.icon-eye-off::before { content: '\e801'; } /* '' */
+.icon-chart-bar::before { content: '\e802'; } /* '' */
+.icon-chart-pie::before { content: '\e803'; } /* '' */
+.icon-chat::before { content: '\e804'; } /* '' */
+.icon-attention-circled::before { content: '\e805'; } /* '' */
+.icon-book-open::before { content: '\e806'; } /* '' */
+.icon-search::before { content: '\e807'; } /* '' */
+.icon-link::before { content: '\e808'; } /* '' */
+.icon-users::before { content: '\e809'; } /* '' */
+.icon-archive::before { content: '\e80a'; } /* '' */
+.icon-home::before { content: '\e80b'; } /* '' */
+.icon-star-empty::before { content: '\e80c'; } /* '' */
+.icon-star::before { content: '\e80d'; } /* '' */
+.icon-warning::before { content: '\e80e'; } /* '' */
+.icon-warning-empty::before { content: '\e80f'; } /* '' */
+.icon-users-1::before { content: '\e810'; } /* '' */
+.icon-doc::before { content: '\e811'; } /* '' */
+.icon-eye-1::before { content: '\e812'; } /* '' */
+.icon-eye-off-1::before { content: '\e813'; } /* '' */
+.icon-ok-circled::before { content: '\e814'; } /* '' */
+.icon-ok-circled2::before { content: '\e815'; } /* '' */
+.icon-cancel-circled::before { content: '\e816'; } /* '' */
+.icon-cancel-circled2::before { content: '\e817'; } /* '' */
+.icon-book::before { content: '\e818'; } /* '' */
+.icon-award::before { content: '\e819'; } /* '' */
+.icon-box-1::before { content: '\e81a'; } /* '' */
+.icon-vcard::before { content: '\e81b'; } /* '' */
+.icon-doc-text::before { content: '\e81c'; } /* '' */
+.icon-doc-text-inv::before { content: '\e81d'; } /* '' */
+.icon-vcard-1::before { content: '\e81e'; } /* '' */
+.icon-left-open-big::before { content: '\e81f'; } /* '' */
+.icon-bell-1::before { content: '\e820'; } /* '' */
+.icon-right-open-big::before { content: '\e821'; } /* '' */
+.icon-globe::before { content: '\e822'; } /* '' */
+.icon-cog::before { content: '\e823'; } /* '' */
+.icon-code::before { content: '\e824'; } /* '' */
+.icon-globe-alt-outline::before { content: '\e825'; } /* '' */
+.icon-globe-alt::before { content: '\e826'; } /* '' */
+.icon-lock::before { content: '\e827'; } /* '' */
+.icon-info-circled::before { content: '\f085'; } /* '' */
+.icon-info-circled-alt::before { content: '\f086'; } /* '' */
+.icon-docs::before { content: '\f0c5'; } /* '' */
+.icon-sitemap::before { content: '\f0e8'; } /* '' */
+.icon-plus-squared::before { content: '\f0fe'; } /* '' */
+.icon-terminal::before { content: '\f120'; } /* '' */
+.icon-fork::before { content: '\f126'; } /* '' */
+.icon-unlink::before { content: '\f127'; } /* '' */
+.icon-lock-open::before { content: '\f13e'; } /* '' */
+.icon-minus-squared::before { content: '\f146'; } /* '' */
+.icon-minus-squared-alt::before { content: '\f147'; } /* '' */
+.icon-doc-inv::before { content: '\f15b'; } /* '' */
+.icon-box::before { content: '\f187'; } /* '' */
+.icon-plus-squared-alt::before { content: '\f196'; } /* '' */
+.icon-cube::before { content: '\f1b2'; } /* '' */
+.icon-cubes::before { content: '\f1b3'; } /* '' */
diff --git a/public/font/mononoki/mononoki.css b/public/font/mononoki/mononoki.css
index 369019f0..67a880ce 100644
--- a/public/font/mononoki/mononoki.css
+++ b/public/font/mononoki/mononoki.css
@@ -1,17 +1,17 @@
 @font-face {
-  font-family: "mononoki";
+  font-family: mononoki;
   src: url("../../font/mononoki/mononoki-Regular.woff");
   font-style: normal;
 }
 
 @font-face {
-  font-family: "mononoki";
+  font-family: mononoki;
   src: url("../../font/mononoki/mononoki-Bold.woff");
-  font-style: bold;
+  font-weight: bold;
 }
 
 @font-face {
-  font-family: "mononoki";
+  font-family: mononoki;
   src: url("../../font/mononoki/mononoki-Italic.woff");
   font-style: italic;
 }
diff --git a/public/font/roboto/roboto.css b/public/font/roboto/roboto.css
index 3c6ed9d6..33b39c92 100644
--- a/public/font/roboto/roboto.css
+++ b/public/font/roboto/roboto.css
@@ -1,54 +1,54 @@
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-Light.ttf');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-LightItalic.ttf');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-Regular.ttf');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-Italic.ttf');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-Medium.ttf');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-MediumItalic.ttf');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-Bold.ttf');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   src: url('../../font/roboto/Roboto-BoldItalic.ttf');
   font-weight: 700;
   font-style: italic;
diff --git a/public/main.css b/public/main.css
index 138021b3..53583340 100644
--- a/public/main.css
+++ b/public/main.css
@@ -4,7 +4,6 @@
 @import url("./font/fontello/fontello.css");
 @import url("./font/roboto/roboto.css");
 @import url("./font/mononoki/mononoki.css");
-
 @import url("./components/locker/locker.css");
 @import url("./components/legend/legend.css");
 @import url("./components/popup/popup.css");
@@ -24,7 +23,7 @@
 body,
 html {
   height: 100%;
-  font-family: "Roboto", sans-serif;
+  font-family: Roboto, sans-serif;
   font-size: 16px;
 }
 
@@ -57,10 +56,10 @@ body {
   /* Barre */
   border: solid 0 transparent;
   border-right-width: 4px;
-  -webkit-border-radius: 5px;
-  -webkit-border-top-right-radius: 9px 5px;
-  -webkit-border-bottom-right-radius: 9px 5px;
-  -webkit-box-shadow: inset 0 0 0 1px #3722AF,
+  border-radius: 5px;
+  border-top-right-radius: 9px 5px;
+  border-bottom-right-radius: 9px 5px;
+  box-shadow: inset 0 0 0 1px #3722AF,
     inset 0 0 0 6px #3f27c7;
 }
 
@@ -68,9 +67,9 @@ body {
   /* Barre du bas */
   border-right-width: 0;
   border-bottom-width: 4px;
-  -webkit-border-top-right-radius: 5px;
-  -webkit-border-bottom-right-radius: 5px 9px;
-  -webkit-border-bottom-left-radius: 5px 9px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px 9px;
+  border-bottom-left-radius: 5px 9px;
 }
 
 main {
diff --git a/workspaces/documentation-ui/src/css/content.css b/workspaces/documentation-ui/src/css/content.css
index 6125af82..219e7c80 100644
--- a/workspaces/documentation-ui/src/css/content.css
+++ b/workspaces/documentation-ui/src/css/content.css
@@ -64,7 +64,7 @@
 }
 
 .documentation--content kbd {
-  background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(229,229,229,1) 100%);
+  background: linear-gradient(to bottom,  rgb(238 238 238 / 100%) 0%,rgb(229 229 229 / 100%) 100%);
   padding: 1px 5px;
   border-radius: 4px;
   border: 2px solid #cdcdcd;
@@ -120,7 +120,7 @@
 
 .documentation--content ul {
   margin: 0.5rem 0;
-  box-shadow: 1px 1px 10px rgba(20, 20, 20, 0.205);
+  box-shadow: 1px 1px 10px rgb(20 20 20 / 20.5%);
   margin-right: 10px;
 }
 
@@ -134,7 +134,7 @@
   margin-top: 3px;
 }
 
-.documentation--content ul li:before {
+.documentation--content ul li::before {
   content: "• ";
 }
 
@@ -163,7 +163,7 @@ table thead tr th {
 }
 
 table tbody tr {
-  background: rgba(55, 55, 55, 0.1);
+  background: rgb(55 55 55 / 10%);
 }
 
 table tr td {
@@ -175,8 +175,8 @@ table tr td {
 table tr td,
 table tr th {
   font-size: 14px;
-  font-family: "mononoki";
-  border: 2px solid rgba(55, 71, 79, 0.30);
+  font-family: mononoki;
+  border: 2px solid rgb(55 71 79 / 30%);
   text-align: center;
   letter-spacing: 0.5px;
   word-wrap: break-word;
@@ -204,7 +204,7 @@ pre code.hljs {
 }
 
 pre code {
-  font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+  font-family: Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
   display: block;
   padding: 15px 16px 14px;
   overflow-x: auto;
diff --git a/workspaces/documentation-ui/src/css/header.css b/workspaces/documentation-ui/src/css/header.css
index 17d365aa..42ce5ae9 100644
--- a/workspaces/documentation-ui/src/css/header.css
+++ b/workspaces/documentation-ui/src/css/header.css
@@ -22,13 +22,13 @@
 }
 
 .documentation--header>.title>p {
-  font-family: "system-ui";
+  font-family: system-ui;
   letter-spacing: 1px;
   font-weight: bold;
   font-size: 26px;
   display: flex;
   align-items: center;
-  text-shadow: 2px 2px 10px rgba(20, 20, 20, 0.4);
+  text-shadow: 2px 2px 10px rgb(20 20 20 / 40%);
 }
 
 .documentation--header>ul {
@@ -41,7 +41,7 @@
   display: flex;
   align-items: flex-start;
   padding: 0 20px;
-  font-family: "Roboto";
+  font-family: Roboto;
   font-weight: bold;
   position: relative;
 }
diff --git a/workspaces/documentation-ui/src/css/main.css b/workspaces/documentation-ui/src/css/main.css
index 04342f20..90796cc4 100644
--- a/workspaces/documentation-ui/src/css/main.css
+++ b/workspaces/documentation-ui/src/css/main.css
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  font-family: "Roboto";
+  font-family: Roboto;
   height: 100%;
 }
 
@@ -33,6 +33,7 @@
   overflow: auto;
   background: #f4f6f7;
 }
+
   .documentation--warnings .documentation--navigation  {
     width: 270px;
   }
@@ -66,10 +67,10 @@
   /* Barre */
   border: solid 0 transparent;
   border-right-width: 4px;
-  -webkit-border-radius: 5px;
-  -webkit-border-top-right-radius: 9px 5px;
-  -webkit-border-bottom-right-radius: 9px 5px;
-  -webkit-box-shadow: inset 0 0 0 1px #3722AF,
+  border-radius: 5px;
+  border-top-right-radius: 9px 5px;
+  border-bottom-right-radius: 9px 5px;
+  box-shadow: inset 0 0 0 1px #3722AF,
     inset 0 0 0 6px #3f27c7;
 }
 
@@ -77,7 +78,7 @@
   /* Barre du bas */
   border-right-width: 0;
   border-bottom-width: 4px;
-  -webkit-border-top-right-radius: 5px;
-  -webkit-border-bottom-right-radius: 5px 9px;
-  -webkit-border-bottom-left-radius: 5px 9px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px 9px;
+  border-bottom-left-radius: 5px 9px;
 }
diff --git a/workspaces/documentation-ui/src/css/navigation.css b/workspaces/documentation-ui/src/css/navigation.css
index 7bdea73b..3dd4b6f0 100644
--- a/workspaces/documentation-ui/src/css/navigation.css
+++ b/workspaces/documentation-ui/src/css/navigation.css
@@ -1,12 +1,10 @@
 .navigation--item {
   position: relative;
   height: 40px;
-  background: -moz-linear-gradient(left, rgba(207, 216, 220, 1) 0%, rgba(255, 255, 255, 0) 100%);
-  background: -webkit-linear-gradient(left, rgba(207, 216, 220, 1) 0%, rgba(255, 255, 255, 0) 100%);
-  background: linear-gradient(to right, rgba(207, 216, 220, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgb(207 216 220 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfd8dc', endColorstr='#00ffffff', GradientType=1);
   border-left: 2px solid #90A4AE;
-  border-radius: 6px 0px 0px 6px;
+  border-radius: 6px 0 0 6px;
   box-sizing: border-box;
   display: flex;
   justify-content: flex-start;
@@ -17,18 +15,14 @@
 }
 
 .navigation--item.active {
-  background: -moz-linear-gradient(left,  rgba(0,209,255,0.57) 0%, rgba(255,255,255,0) 100%);
-  background: -webkit-linear-gradient(left,  rgba(0,209,255,0.57) 0%,rgba(255,255,255,0) 100%);
-  background: linear-gradient(to right,  rgba(0,209,255,0.57) 0%,rgba(255,255,255,0) 100%);
+  background: linear-gradient(to right,  rgb(0 209 255 / 57%) 0%,rgb(255 255 255 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9100d1ff', endColorstr='#00ffffff',GradientType=1 );
   border-left: 2px solid #00D1FF;
 }
 
 .navigation--item:not(.active):hover {
   cursor: pointer;
-  background: -moz-linear-gradient(left,  rgba(179,207,219,1) 0%, rgba(255,255,255,0) 100%);
-  background: -webkit-linear-gradient(left,  rgba(179,207,219,1) 0%,rgba(255,255,255,0) 100%);
-  background: linear-gradient(to right,  rgba(179,207,219,1) 0%,rgba(255,255,255,0) 100%);
+  background: linear-gradient(to right,  rgb(179 207 219 / 100%) 0%,rgb(255 255 255 / 0%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3cfdb', endColorstr='#00ffffff',GradientType=1 );
   border-left: 2px solid #73838b;
 }
@@ -53,14 +47,15 @@
   color: #37474F;
 }
 
-@media screen and (max-width: 1600px) {
+@media screen and (width <= 1600px) {
   .documentation--warnings .documentation--navigation  {
     width: auto !important;
   }
 
   .documentation--flags .navigation--item>p.icon {
-    margin-right: 0px;
+    margin-right: 0;
   }
+
   .documentation--flags .navigation--item>p.description {
     display: none;
   }