From 44d1bf0fe8703091d2efc634568a35a7c301b9f4 Mon Sep 17 00:00:00 2001
From: Oksamies <asko.soisalo@gmail.com>
Date: Wed, 25 Sep 2024 20:10:21 +0300
Subject: [PATCH] Run pre-commit with updated stylelint versions

---
 apps/cyberstorm-remix/app/Error.module.css    | 466 +++++++++---------
 apps/cyberstorm-remix/app/Markdown.module.css |  44 +-
 .../app/RootLayout.module.css                 |   4 +-
 .../app/c/CommunityCard.module.css            |  10 +-
 .../FilterMenus/CollapsibleMenu.module.css    |   4 +-
 .../FilterMenus/FilterMenu.module.css         |   4 +-
 .../PackageSearch/PackageList.module.css      |   2 +-
 .../PageHeader/PageHeader.module.css          |   2 +-
 .../app/communities/Communities.module.css    |   2 +-
 .../app/communities/CommunityList.module.css  |   2 +-
 .../app/communities/SearchAndOrder.module.css |   2 +-
 apps/cyberstorm-remix/app/globals.css         |  94 ++--
 .../Dependencies/Dependencies.module.css      |   2 +-
 .../app/p/dependants/Dependants.module.css    |  10 +-
 .../p/headerPackageDetailLayout.module.css    |   2 +-
 .../user/Connections/Connections.module.css   |   2 +-
 .../src/forms/TeamDetailsEdit.module.css      |   2 +-
 .../src/forms/UserConnectionsForm.module.css  |   2 +-
 .../cyberstorm-styles/src/styles/globals.css  |   6 +-
 .../cyberstorm-styles/src/styles/theme.css    |  61 ++-
 .../src/components/Button/Button.module.css   |  32 +-
 .../src/components/CodeBox/CodeBox.module.css |   3 +-
 .../CollapsibleText.module.css                |   2 +-
 .../src/components/Dialog/Dialog.module.css   |   3 +-
 .../components/Markdown/Markdown.module.css   |  44 +-
 .../SettingItem/SettingItem.module.css        |   2 +-
 .../src/components/Table/Table.module.css     |  34 +-
 .../AdContainer/AdContainer.module.css        |   3 +-
 .../ButtonStyles/Button.module.css            |  63 +--
 29 files changed, 499 insertions(+), 410 deletions(-)

diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css
index 0006e9bed..bfd32e8e8 100644
--- a/apps/cyberstorm-remix/app/Error.module.css
+++ b/apps/cyberstorm-remix/app/Error.module.css
@@ -43,270 +43,258 @@
   top: 10px;
   left: 15px;
   color: var(--glitch-color-1);
-  animation:
-    paths 5s step-end infinite,
-    opacity 5s step-end infinite,
-    font 8s step-end infinite,
-    movement 10s step-end infinite;
+  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+    font 8s step-end infinite, movement 10s step-end infinite;
 }
 
 .glitch::after {
   top: 5px;
   left: -10px;
   color: var(--glitch-color-2);
-  animation:
-    paths 5s step-end infinite,
-    opacity 5s step-end infinite,
-    font 7s step-end infinite,
-    movement 8s step-end infinite;
+  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+    font 7s step-end infinite, movement 8s step-end infinite;
 }
 
 @keyframes paths {
   0% {
-    clip-path:
-      polygon(
-        0% 43%,
-        83% 43%,
-        83% 22%,
-        23% 22%,
-        23% 24%,
-        91% 24%,
-        91% 26%,
-        18% 26%,
-        18% 83%,
-        29% 83%,
-        29% 17%,
-        41% 17%,
-        41% 39%,
-        18% 39%,
-        18% 82%,
-        54% 82%,
-        54% 88%,
-        19% 88%,
-        19% 4%,
-        39% 4%,
-        39% 14%,
-        76% 14%,
-        76% 52%,
-        23% 52%,
-        23% 35%,
-        19% 35%,
-        19% 8%,
-        36% 8%,
-        36% 31%,
-        73% 31%,
-        73% 16%,
-        1% 16%,
-        1% 56%,
-        50% 56%,
-        50% 8%
-      );
+    clip-path: polygon(
+      0% 43%,
+      83% 43%,
+      83% 22%,
+      23% 22%,
+      23% 24%,
+      91% 24%,
+      91% 26%,
+      18% 26%,
+      18% 83%,
+      29% 83%,
+      29% 17%,
+      41% 17%,
+      41% 39%,
+      18% 39%,
+      18% 82%,
+      54% 82%,
+      54% 88%,
+      19% 88%,
+      19% 4%,
+      39% 4%,
+      39% 14%,
+      76% 14%,
+      76% 52%,
+      23% 52%,
+      23% 35%,
+      19% 35%,
+      19% 8%,
+      36% 8%,
+      36% 31%,
+      73% 31%,
+      73% 16%,
+      1% 16%,
+      1% 56%,
+      50% 56%,
+      50% 8%
+    );
   }
 
   5% {
-    clip-path:
-      polygon(
-        0% 29%,
-        44% 29%,
-        44% 83%,
-        94% 83%,
-        94% 56%,
-        11% 56%,
-        11% 64%,
-        94% 64%,
-        94% 70%,
-        88% 70%,
-        88% 32%,
-        18% 32%,
-        18% 96%,
-        10% 96%,
-        10% 62%,
-        9% 62%,
-        9% 84%,
-        68% 84%,
-        68% 50%,
-        52% 50%,
-        52% 55%,
-        35% 55%,
-        35% 87%,
-        25% 87%,
-        25% 39%,
-        15% 39%,
-        15% 88%,
-        52% 88%
-      );
+    clip-path: polygon(
+      0% 29%,
+      44% 29%,
+      44% 83%,
+      94% 83%,
+      94% 56%,
+      11% 56%,
+      11% 64%,
+      94% 64%,
+      94% 70%,
+      88% 70%,
+      88% 32%,
+      18% 32%,
+      18% 96%,
+      10% 96%,
+      10% 62%,
+      9% 62%,
+      9% 84%,
+      68% 84%,
+      68% 50%,
+      52% 50%,
+      52% 55%,
+      35% 55%,
+      35% 87%,
+      25% 87%,
+      25% 39%,
+      15% 39%,
+      15% 88%,
+      52% 88%
+    );
   }
 
   30% {
-    clip-path:
-      polygon(
-        0% 53%,
-        93% 53%,
-        93% 62%,
-        68% 62%,
-        68% 37%,
-        97% 37%,
-        97% 89%,
-        13% 89%,
-        13% 45%,
-        51% 45%,
-        51% 88%,
-        17% 88%,
-        17% 54%,
-        81% 54%,
-        81% 75%,
-        79% 75%,
-        79% 76%,
-        38% 76%,
-        38% 28%,
-        61% 28%,
-        61% 12%,
-        55% 12%,
-        55% 62%,
-        68% 62%,
-        68% 51%,
-        0% 51%,
-        0% 92%,
-        63% 92%,
-        63% 4%,
-        65% 4%
-      );
+    clip-path: polygon(
+      0% 53%,
+      93% 53%,
+      93% 62%,
+      68% 62%,
+      68% 37%,
+      97% 37%,
+      97% 89%,
+      13% 89%,
+      13% 45%,
+      51% 45%,
+      51% 88%,
+      17% 88%,
+      17% 54%,
+      81% 54%,
+      81% 75%,
+      79% 75%,
+      79% 76%,
+      38% 76%,
+      38% 28%,
+      61% 28%,
+      61% 12%,
+      55% 12%,
+      55% 62%,
+      68% 62%,
+      68% 51%,
+      0% 51%,
+      0% 92%,
+      63% 92%,
+      63% 4%,
+      65% 4%
+    );
   }
 
   45% {
-    clip-path:
-      polygon(
-        0% 33%,
-        2% 33%,
-        2% 69%,
-        58% 69%,
-        58% 94%,
-        55% 94%,
-        55% 25%,
-        33% 25%,
-        33% 85%,
-        16% 85%,
-        16% 19%,
-        5% 19%,
-        5% 20%,
-        79% 20%,
-        79% 96%,
-        93% 96%,
-        93% 50%,
-        5% 50%,
-        5% 74%,
-        55% 74%,
-        55% 57%,
-        96% 57%,
-        96% 59%,
-        87% 59%,
-        87% 65%,
-        82% 65%,
-        82% 39%,
-        63% 39%,
-        63% 92%,
-        4% 92%,
-        4% 36%,
-        24% 36%,
-        24% 70%,
-        1% 70%,
-        1% 43%,
-        15% 43%,
-        15% 28%,
-        23% 28%,
-        23% 71%,
-        90% 71%,
-        90% 86%,
-        97% 86%,
-        97% 1%,
-        60% 1%,
-        60% 67%,
-        71% 67%,
-        71% 91%,
-        17% 91%,
-        17% 14%,
-        39% 14%,
-        39% 30%,
-        58% 30%,
-        58% 11%,
-        52% 11%,
-        52% 83%,
-        68% 83%
-      );
+    clip-path: polygon(
+      0% 33%,
+      2% 33%,
+      2% 69%,
+      58% 69%,
+      58% 94%,
+      55% 94%,
+      55% 25%,
+      33% 25%,
+      33% 85%,
+      16% 85%,
+      16% 19%,
+      5% 19%,
+      5% 20%,
+      79% 20%,
+      79% 96%,
+      93% 96%,
+      93% 50%,
+      5% 50%,
+      5% 74%,
+      55% 74%,
+      55% 57%,
+      96% 57%,
+      96% 59%,
+      87% 59%,
+      87% 65%,
+      82% 65%,
+      82% 39%,
+      63% 39%,
+      63% 92%,
+      4% 92%,
+      4% 36%,
+      24% 36%,
+      24% 70%,
+      1% 70%,
+      1% 43%,
+      15% 43%,
+      15% 28%,
+      23% 28%,
+      23% 71%,
+      90% 71%,
+      90% 86%,
+      97% 86%,
+      97% 1%,
+      60% 1%,
+      60% 67%,
+      71% 67%,
+      71% 91%,
+      17% 91%,
+      17% 14%,
+      39% 14%,
+      39% 30%,
+      58% 30%,
+      58% 11%,
+      52% 11%,
+      52% 83%,
+      68% 83%
+    );
   }
 
   76% {
-    clip-path:
-      polygon(
-        0% 26%,
-        15% 26%,
-        15% 73%,
-        72% 73%,
-        72% 70%,
-        77% 70%,
-        77% 75%,
-        8% 75%,
-        8% 42%,
-        4% 42%,
-        4% 61%,
-        17% 61%,
-        17% 12%,
-        26% 12%,
-        26% 63%,
-        73% 63%,
-        73% 43%,
-        90% 43%,
-        90% 67%,
-        50% 67%,
-        50% 41%,
-        42% 41%,
-        42% 46%,
-        50% 46%,
-        50% 84%,
-        96% 84%,
-        96% 78%,
-        49% 78%,
-        49% 25%,
-        63% 25%,
-        63% 14%
-      );
+    clip-path: polygon(
+      0% 26%,
+      15% 26%,
+      15% 73%,
+      72% 73%,
+      72% 70%,
+      77% 70%,
+      77% 75%,
+      8% 75%,
+      8% 42%,
+      4% 42%,
+      4% 61%,
+      17% 61%,
+      17% 12%,
+      26% 12%,
+      26% 63%,
+      73% 63%,
+      73% 43%,
+      90% 43%,
+      90% 67%,
+      50% 67%,
+      50% 41%,
+      42% 41%,
+      42% 46%,
+      50% 46%,
+      50% 84%,
+      96% 84%,
+      96% 78%,
+      49% 78%,
+      49% 25%,
+      63% 25%,
+      63% 14%
+    );
   }
 
   90% {
-    clip-path:
-      polygon(
-        0% 41%,
-        13% 41%,
-        13% 6%,
-        87% 6%,
-        87% 93%,
-        10% 93%,
-        10% 13%,
-        89% 13%,
-        89% 6%,
-        3% 6%,
-        3% 8%,
-        16% 8%,
-        16% 79%,
-        0% 79%,
-        0% 99%,
-        92% 99%,
-        92% 90%,
-        5% 90%,
-        5% 60%,
-        0% 60%,
-        0% 48%,
-        89% 48%,
-        89% 13%,
-        80% 13%,
-        80% 43%,
-        95% 43%,
-        95% 19%,
-        80% 19%,
-        80% 85%,
-        38% 85%,
-        38% 62%
-      );
+    clip-path: polygon(
+      0% 41%,
+      13% 41%,
+      13% 6%,
+      87% 6%,
+      87% 93%,
+      10% 93%,
+      10% 13%,
+      89% 13%,
+      89% 6%,
+      3% 6%,
+      3% 8%,
+      16% 8%,
+      16% 79%,
+      0% 79%,
+      0% 99%,
+      92% 99%,
+      92% 90%,
+      5% 90%,
+      5% 60%,
+      0% 60%,
+      0% 48%,
+      89% 48%,
+      89% 13%,
+      80% 13%,
+      80% 43%,
+      95% 43%,
+      95% 19%,
+      80% 19%,
+      80% 85%,
+      38% 85%,
+      38% 62%
+    );
   }
 
   1%,
diff --git a/apps/cyberstorm-remix/app/Markdown.module.css b/apps/cyberstorm-remix/app/Markdown.module.css
index 5ef7478c9..423813d9c 100644
--- a/apps/cyberstorm-remix/app/Markdown.module.css
+++ b/apps/cyberstorm-remix/app/Markdown.module.css
@@ -8,7 +8,9 @@
   line-height: 1.6rem;
 }
 
-.root > :first-child { padding-top: 0; }
+.root > :first-child {
+  padding-top: 0;
+}
 
 /*
   We can't control the elements inside the Markdown wrapper, e.g. to
@@ -43,11 +45,25 @@
   padding-top: 1rem;
 }
 
-.root h1 { font-size: 2.25rem; }
-.root h2 { font-size: 1.75rem; }
-.root h3 { font-size: 1.25rem; }
-.root h4 { font-size: 1rem; }
-.root h5 { font-size: 0.875rem; }
+.root h1 {
+  font-size: 2.25rem;
+}
+
+.root h2 {
+  font-size: 1.75rem;
+}
+
+.root h3 {
+  font-size: 1.25rem;
+}
+
+.root h4 {
+  font-size: 1rem;
+}
+
+.root h5 {
+  font-size: 0.875rem;
+}
 
 .root h6 {
   color: #9c9cc4;
@@ -59,7 +75,9 @@
   margin-inline-start: 0.75rem;
 }
 
-.root img { display: inline-block; }
+.root img {
+  display: inline-block;
+}
 
 .root li > ul,
 .root li > ol {
@@ -96,7 +114,9 @@
   color: #f5f5f6;
 }
 
-.root a { color: var(--old--color-cyber-green--50); }
+.root a {
+  color: var(--old--color-cyber-green--50);
+}
 
 .root blockquote {
   display: flex;
@@ -111,9 +131,13 @@
   border-spacing: 0;
 }
 
-.root tbody tr:nth-child(even) { background: #0d0d21; }
+.root tbody tr:nth-child(even) {
+  background: #0d0d21;
+}
 
-.root tbody tr:nth-child(odd) { background: #15152d; }
+.root tbody tr:nth-child(odd) {
+  background: #15152d;
+}
 
 .root table tr th,
 .root table tr td {
diff --git a/apps/cyberstorm-remix/app/RootLayout.module.css b/apps/cyberstorm-remix/app/RootLayout.module.css
index 696c215c6..96b58ee17 100644
--- a/apps/cyberstorm-remix/app/RootLayout.module.css
+++ b/apps/cyberstorm-remix/app/RootLayout.module.css
@@ -59,7 +59,7 @@
   gap: 2rem;
 }
 
-@media (min-width: 60rem) {
+@media (width >= 60rem) {
   .layoutSidebar {
     flex-flow: row wrap;
   }
@@ -85,7 +85,7 @@
   }
 }
 
-@media (max-width: 92.125rem) {
+@media (width <= 92.125rem) {
   .sideContainers {
     display: none;
   }
diff --git a/apps/cyberstorm-remix/app/c/CommunityCard.module.css b/apps/cyberstorm-remix/app/c/CommunityCard.module.css
index 80e9dba87..33169462b 100644
--- a/apps/cyberstorm-remix/app/c/CommunityCard.module.css
+++ b/apps/cyberstorm-remix/app/c/CommunityCard.module.css
@@ -15,7 +15,7 @@
   min-width: 0;
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .root {
     gap: var(--space--16);
   }
@@ -65,7 +65,11 @@
   mask-image: var(--gradients);
   mask-composite: intersect;
 
-  --gradients:
-    linear-gradient(90deg, transparent 0%, white 70%, transparent 100%),
+  --gradients: linear-gradient(
+      90deg,
+      transparent 0%,
+      white 70%,
+      transparent 100%
+    ),
     linear-gradient(180deg, white 40%, transparent 95%);
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
index 1b9d47f99..691093376 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
@@ -49,7 +49,9 @@
   transition: ease-out var(--animation-length-xs);
 }
 
-.label:hover .checkbox { --mark-color: #4343a3; }
+.label:hover .checkbox {
+  --mark-color: #4343a3;
+}
 
 .label.include,
 .label.include .checkbox {
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
index 2e15a516a..98da3c229 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
@@ -43,7 +43,9 @@
   transition: ease-out var(--animation-length-xs);
 }
 
-.label:hover .checkbox { --mark-color: #4343a3; }
+.label:hover .checkbox {
+  --mark-color: #4343a3;
+}
 
 .label.include,
 .label.include .checkbox {
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
index 7eba75ba3..21a96aa06 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
@@ -64,7 +64,7 @@
   height: var(--space--36);
 }
 
-@media (max-width: 43.75rem) {
+@media (width <= 43.75rem) {
   .top {
     flex-direction: column-reverse;
     gap: 1rem;
diff --git a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css
index c17121144..837377821 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css
@@ -15,7 +15,7 @@
   min-width: 0;
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .root {
     gap: var(--space--16);
   }
diff --git a/apps/cyberstorm-remix/app/communities/Communities.module.css b/apps/cyberstorm-remix/app/communities/Communities.module.css
index 02b3df9cf..072d6230c 100644
--- a/apps/cyberstorm-remix/app/communities/Communities.module.css
+++ b/apps/cyberstorm-remix/app/communities/Communities.module.css
@@ -1,4 +1,4 @@
-@media (max-width: 40rem) {
+@media (width <= 40rem) {
   .breadcrumbs {
     display: none;
   }
diff --git a/apps/cyberstorm-remix/app/communities/CommunityList.module.css b/apps/cyberstorm-remix/app/communities/CommunityList.module.css
index 7dd69dee9..80469f81d 100644
--- a/apps/cyberstorm-remix/app/communities/CommunityList.module.css
+++ b/apps/cyberstorm-remix/app/communities/CommunityList.module.css
@@ -28,7 +28,7 @@
   }
 }
 
-@media (max-width: 27.5rem) {
+@media (width <= 27.5rem) {
   .root {
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
   }
diff --git a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
index 7a4f589e3..c9da7c9f5 100644
--- a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
+++ b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
@@ -23,7 +23,7 @@
   white-space: nowrap;
 }
 
-@media (max-width: 40rem) {
+@media (width <= 40rem) {
   .root {
     flex-direction: column;
   }
diff --git a/apps/cyberstorm-remix/app/globals.css b/apps/cyberstorm-remix/app/globals.css
index 6418e3c44..955e6808d 100644
--- a/apps/cyberstorm-remix/app/globals.css
+++ b/apps/cyberstorm-remix/app/globals.css
@@ -1,49 +1,32 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono:
-    ui-monospace,
-    menlo,
-    monaco,
-    "Cascadia Mono",
-    "Segoe UI Mono",
-    "Roboto Mono",
-    "Oxygen Mono",
-    "Ubuntu Monospace",
-    "Source Code Pro",
-    "Fira Mono",
-    "Droid Sans Mono",
-    "Courier New",
-    monospace;
+  --font-mono: ui-monospace, menlo, monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
-  --primary-glow:
-    conic-gradient(
-      from 180deg at 50% 50%,
-      #16abff33 0deg,
-      #0885ff33 55deg,
-      #54d6ff33 120deg,
-      #0071ff33 160deg,
-      transparent 360deg
-    );
-  --secondary-glow:
-    radial-gradient(
-      rgb(255 255 255 / 1),
-      rgb(255 255 255 / 0)
-    );
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgb(255 255 255 / 1), rgb(255 255 255 / 0));
   --tile-start-rgb: 239, 245, 249;
   --tile-end-rgb: 228, 232, 233;
-  --tile-border:
-    conic-gradient(
-      #00000080,
-      #00000040,
-      #00000030,
-      #00000020,
-      #00000010,
-      #00000010,
-      #00000080
-    );
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
   --callout-rgb: 238, 240, 241;
   --callout-border-rgb: 172, 175, 176;
   --card-rgb: 180, 185, 188;
@@ -56,25 +39,23 @@
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
     --primary-glow: radial-gradient(rgb(1 65 255 / 0.4), rgb(1 65 255 / 0));
-    --secondary-glow:
-      linear-gradient(
-        to bottom right,
-        rgb(1 65 255 / 0),
-        rgb(1 65 255 / 0),
-        rgb(1 65 255 / 0.3)
-      );
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgb(1 65 255 / 0),
+      rgb(1 65 255 / 0),
+      rgb(1 65 255 / 0.3)
+    );
     --tile-start-rgb: 2, 13, 46;
     --tile-end-rgb: 2, 5, 19;
-    --tile-border:
-      conic-gradient(
-        #ffffff80,
-        #ffffff40,
-        #ffffff30,
-        #ffffff20,
-        #ffffff10,
-        #ffffff10,
-        #ffffff80
-      );
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
     --callout-rgb: 20, 20, 20;
     --callout-border-rgb: 108, 108, 108;
     --card-rgb: 100, 100, 100;
@@ -96,8 +77,7 @@ body {
 
 body {
   color: rgb(var(--foreground-rgb));
-  background:
-    linear-gradient(
+  background: linear-gradient(
       to bottom,
       transparent,
       rgb(var(--background-end-rgb))
diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
index bd71735d6..ba729d11d 100644
--- a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
+++ b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
@@ -44,7 +44,7 @@
   text-overflow: ellipsis;
 }
 
-@media (min-width: 60rem) {
+@media (width >= 60rem) {
   .itemDescription,
   .itemTitle {
     max-width: 250px;
diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css b/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
index 977281272..4f32fc3f2 100644
--- a/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
+++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
@@ -4,7 +4,7 @@
   gap: var(--space--32);
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .root {
     gap: var(--space--16);
   }
@@ -32,8 +32,12 @@
   mask-image: var(--gradients);
   mask-composite: intersect;
 
-  --gradients:
-    linear-gradient(90deg, transparent 0%, white 70%, transparent 100%),
+  --gradients: linear-gradient(
+      90deg,
+      transparent 0%,
+      white 70%,
+      transparent 100%
+    ),
     linear-gradient(180deg, white 40%, transparent 95%);
 }
 
diff --git a/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css b/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css
index 27260ae7b..add56a31c 100644
--- a/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css
+++ b/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css
@@ -87,7 +87,7 @@
   color: var(--color-highlight);
 }
 
-@media (max-width: 60rem) {
+@media (width <= 60rem) {
   .packageInfo {
     flex-direction: column;
     gap: 0;
diff --git a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
index a2ad49b6c..9974f0b7b 100644
--- a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
@@ -91,7 +91,7 @@
   line-height: normal;
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .item {
     flex-direction: column;
     gap: var(--gap--8);
diff --git a/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css b/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css
index 550e47ba2..5bc6df7a0 100644
--- a/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css
+++ b/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css
@@ -56,7 +56,7 @@
   flex-direction: row-reverse;
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .donationLink {
     flex-direction: column;
     gap: var(--gap--16);
diff --git a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
index e5fbcdc80..afffbbf3b 100644
--- a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
@@ -103,7 +103,7 @@
   font-size: 0.875rem;
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .item {
     flex-direction: column;
     gap: var(--gap--8);
diff --git a/packages/cyberstorm-styles/src/styles/globals.css b/packages/cyberstorm-styles/src/styles/globals.css
index 70cc28a32..62318b0cf 100644
--- a/packages/cyberstorm-styles/src/styles/globals.css
+++ b/packages/cyberstorm-styles/src/styles/globals.css
@@ -91,19 +91,19 @@
 
 /* e.g --scaling-s --scaling-m --scaling-l */
 
-@media (max-width: calc(40rem - 1px)) {
+@media (width <= calc(40rem - 1px)) {
   :root {
     --scaling: 0.7;
   }
 }
 
-@media (min-width: 40rem) {
+@media (width >= 40rem) {
   :root {
     --scaling: 0.9;
   }
 }
 
-@media (min-width: 63.5rem) {
+@media (width >= 63.5rem) {
   :root {
     --scaling: 1;
   }
diff --git a/packages/cyberstorm-styles/src/styles/theme.css b/packages/cyberstorm-styles/src/styles/theme.css
index aaaf8420b..29aafbe4e 100644
--- a/packages/cyberstorm-styles/src/styles/theme.css
+++ b/packages/cyberstorm-styles/src/styles/theme.css
@@ -32,22 +32,61 @@
   --color-border: rgb(54 52 91 / 1);
   --color-border--highlight: rgb(93 90 159);
   --color-shadow-1: rgb(0 0 0 / 0.7);
-  --color-gradient-blue-green--darker: linear-gradient(to left top, rgb(6 33 49) 0%, rgb(16 43 32) 100%);
-  --color-gradient-blue-green--dark: linear-gradient(to left top, rgb(11 65 98) 0%, rgb(32 87 64) 100%);
-  --color-gradient-blue-green: linear-gradient(to left top, rgb(28 163 245) 0%, rgb(35 255 176) 100%);
-  --color-gradient-blue-green--light: linear-gradient(to left top, rgb(73 181 247) 0%, rgb(115 225 178) 100%);
-  --color-gradient-purple-green--darker: linear-gradient(to left top, rgb(31 10 46) 0%, rgb(16 43 32) 100%);
-  --color-gradient-purple-green--dark: linear-gradient(to left top, rgb(47 14 68) 0%, rgb(10 76 53) 100%);
-  --color-gradient-purple-green: linear-gradient(to left top, rgb(157 48 228) 0%, rgb(35 255 176) 100%);
-  --color-gradient-purple-green--light: linear-gradient(to left top, rgb(177 89 233) 0%, rgb(115 225 178) 100%);
-  --color-gradient-vibrant: linear-gradient(to left, rgb(157 48 228) 0%, rgb(28 167 245) 50%, rgb(35 255 176) 100%);
+  --color-gradient-blue-green--darker: linear-gradient(
+    to left top,
+    rgb(6 33 49) 0%,
+    rgb(16 43 32) 100%
+  );
+  --color-gradient-blue-green--dark: linear-gradient(
+    to left top,
+    rgb(11 65 98) 0%,
+    rgb(32 87 64) 100%
+  );
+  --color-gradient-blue-green: linear-gradient(
+    to left top,
+    rgb(28 163 245) 0%,
+    rgb(35 255 176) 100%
+  );
+  --color-gradient-blue-green--light: linear-gradient(
+    to left top,
+    rgb(73 181 247) 0%,
+    rgb(115 225 178) 100%
+  );
+  --color-gradient-purple-green--darker: linear-gradient(
+    to left top,
+    rgb(31 10 46) 0%,
+    rgb(16 43 32) 100%
+  );
+  --color-gradient-purple-green--dark: linear-gradient(
+    to left top,
+    rgb(47 14 68) 0%,
+    rgb(10 76 53) 100%
+  );
+  --color-gradient-purple-green: linear-gradient(
+    to left top,
+    rgb(157 48 228) 0%,
+    rgb(35 255 176) 100%
+  );
+  --color-gradient-purple-green--light: linear-gradient(
+    to left top,
+    rgb(177 89 233) 0%,
+    rgb(115 225 178) 100%
+  );
+  --color-gradient-vibrant: linear-gradient(
+    to left,
+    rgb(157 48 228) 0%,
+    rgb(28 167 245) 50%,
+    rgb(35 255 176) 100%
+  );
   --color-highlight--hover: var(--old--color-cyber-green--40);
   --color-highlight: var(--old--color-cyber-green--50);
   --box-shadow-default: 0 0.75em 1.5em 0.25em rgb(0 0 0 / 0.65);
   --box-shadow-small: 0 0.25em 0.75em 0.125em rgb(0 0 0 / 0.65);
   --box-shadow-special-green: 0 0 1em rgb(80 217 159 / 0.32);
-  --box-shadow-special-green--highlight: 0 0 0.75em rgb(255 255 255 / 0.2), 0 0 1.125em rgb(80 217 159 / 0.6);
-  --box-shadow-special-purple--highlight: 0 0 0.75em rgb(255 255 255 / 0.2), 0 0 1.125em rgb(157 48 228 / 0.5);
+  --box-shadow-special-green--highlight: 0 0 0.75em rgb(255 255 255 / 0.2),
+    0 0 1.125em rgb(80 217 159 / 0.6);
+  --box-shadow-special-purple--highlight: 0 0 0.75em rgb(255 255 255 / 0.2),
+    0 0 1.125em rgb(157 48 228 / 0.5);
   --color-text--default: rgb(245 245 246);
   --color-text--secondary: rgb(196 192 216);
   --color-text--accent: rgb(198 195 255);
diff --git a/packages/cyberstorm/src/components/Button/Button.module.css b/packages/cyberstorm/src/components/Button/Button.module.css
index 6212a631e..8bf19aca8 100644
--- a/packages/cyberstorm/src/components/Button/Button.module.css
+++ b/packages/cyberstorm/src/components/Button/Button.module.css
@@ -60,15 +60,13 @@
   --bg-color: var(--old--color-cyber-green--60);
   --text-color: var(--old--color-cyber-green--10);
 
-  box-shadow:
-    inset 0 -3px 0 0 rgb(0 0 0 / 0.35),
+  box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 0.35),
     inset 0 var(--space--px) 0 0 rgb(255 255 255 / 0.2),
     inset 0 0 var(--space--16) 0 var(--old--color-green--6);
 }
 
 .button__fancyAccent:hover {
-  box-shadow:
-    inset 0 -3px 0 0 rgb(0 0 0 / 0.35),
+  box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 0.35),
     inset 0 var(--space--px) 0 0 rgb(255 255 255 / 0.2),
     inset 0 0 var(--space--16) 0 var(--old--color-green--3),
     0 0 var(--space--10) 0 rgb(79 216 159 / 0.5);
@@ -77,8 +75,7 @@
 .button__fancyAccent:active {
   --bg-color: var(--old--color-cyber-green--50);
 
-  box-shadow:
-    inset 0 var(--space--2) 0 0 rgb(0 0 0 / 0.25),
+  box-shadow: inset 0 var(--space--2) 0 0 rgb(0 0 0 / 0.25),
     0 0 var(--space--10) 0 rgb(79 216 159 / 0.5);
 }
 
@@ -163,12 +160,14 @@
 }
 
 .button__specialGreen {
-  background: var(--color-gradient-blue-green--darker) padding-box, var(--color-gradient-blue-green) border-box;
+  background: var(--color-gradient-blue-green--darker) padding-box,
+    var(--color-gradient-blue-green) border-box;
   box-shadow: var(--box-shadow-special-green);
 }
 
 .button__specialPurple {
-  background: linear-gradient(315deg, #1f0a2e 0%, #102b20 100%) padding-box, linear-gradient(315deg, #9d30e4 0%, #23ffb0 100%) border-box;
+  background: linear-gradient(315deg, #1f0a2e 0%, #102b20 100%) padding-box,
+    linear-gradient(315deg, #9d30e4 0%, #23ffb0 100%) border-box;
 }
 
 .button__specialGreen:hover {
@@ -180,16 +179,14 @@
 .button__specialPurple:hover {
   --button-border-color: transparent;
 
-  background: linear-gradient(315deg, #0b4162 0%, #205740 100%) padding-box, linear-gradient(315deg, #49b5f7 0%, #73e1b2 100%) border-box;
+  background: linear-gradient(315deg, #0b4162 0%, #205740 100%) padding-box,
+    linear-gradient(315deg, #49b5f7 0%, #73e1b2 100%) border-box;
 }
 
 .button__specialGreen::before,
 .button__specialPurple::before {
   position: absolute;
-  top: calc(0 - var(--button-border-width));
-  right: calc(0 - var(--button-border-width));
-  bottom: calc(0 - var(--button-border-width));
-  left: calc(0 - var(--button-border-width));
+  inset: calc(0 - var(--button-border-width));
   z-index: -1;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--border-radius--8);
@@ -199,11 +196,13 @@
 }
 
 .button__specialGreen::before {
-  background: var(--color-gradient-blue-green--dark) padding-box, var(--color-gradient-blue-green--light) border-box;
+  background: var(--color-gradient-blue-green--dark) padding-box,
+    var(--color-gradient-blue-green--light) border-box;
 }
 
 .button__specialPurple::before {
-  background: var(--color-gradient-purple-green--dark) padding-box, var(--color-gradient-purple-green--light) border-box;
+  background: var(--color-gradient-purple-green--dark) padding-box,
+    var(--color-gradient-purple-green--light) border-box;
 }
 
 .button__specialPurple:hover::before,
@@ -320,7 +319,8 @@
 }
 
 .padding__huge:active {
-  --button-padding-block: calc(var(--space--16) + var(--space--2)) calc(var(--space--16) - var(--space--2));
+  --button-padding-block: calc(var(--space--16) + var(--space--2))
+    calc(var(--space--16) - var(--space--2));
 }
 
 /* Button Icon */
diff --git a/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css b/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css
index 282cd03d5..52871cc77 100644
--- a/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css
+++ b/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css
@@ -5,8 +5,7 @@
   border: 1px solid #333370;
 
   border-radius: var(--border-radius--8);
-  overflow-x: auto;
-  overflow-y: auto;
+  overflow: auto;
   font-weight: var(--font-weight-regular);
   font-size: 0.875rem;
 
diff --git a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css b/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
index aef904a72..e592d4f76 100644
--- a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
+++ b/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
@@ -15,7 +15,7 @@
   white-space: normal;
 }
 
-@media (max-width: 30rem) {
+@media (width <= 30rem) {
   .text {
     font-size: var(--font-size--s);
     line-height: var(--line-height--s);
diff --git a/packages/cyberstorm/src/components/Dialog/Dialog.module.css b/packages/cyberstorm/src/components/Dialog/Dialog.module.css
index 23fbc35fa..14d8f48ef 100644
--- a/packages/cyberstorm/src/components/Dialog/Dialog.module.css
+++ b/packages/cyberstorm/src/components/Dialog/Dialog.module.css
@@ -17,7 +17,8 @@
   border-radius: var(--border-radius--8);
   background-color: var(--color-surface--2);
 
-  box-shadow: hsl(206deg 22% 7% / 0.35) 0 10px 38px -10px, hsl(206deg 22% 7% / 0.2) 0 10px 20px -15px;
+  box-shadow: hsl(206deg 22% 7% / 0.35) 0 10px 38px -10px,
+    hsl(206deg 22% 7% / 0.2) 0 10px 20px -15px;
   transform: translate(-50%, -50%);
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
   animation: contentShow var(--animation-length-m) cubic-bezier(0.16, 1, 0.3, 1);
diff --git a/packages/cyberstorm/src/components/Markdown/Markdown.module.css b/packages/cyberstorm/src/components/Markdown/Markdown.module.css
index 8023e919c..7ade6ccc7 100644
--- a/packages/cyberstorm/src/components/Markdown/Markdown.module.css
+++ b/packages/cyberstorm/src/components/Markdown/Markdown.module.css
@@ -12,7 +12,9 @@
   line-height: 1.6rem;
 }
 
-.root > :first-child { padding-top: 0; }
+.root > :first-child {
+  padding-top: 0;
+}
 
 /*
   We can't control the elements inside the Markdown wrapper, e.g. to
@@ -47,11 +49,25 @@
   padding-top: 1rem;
 }
 
-.root h1 { font-size: 2.25rem; }
-.root h2 { font-size: 1.75rem; }
-.root h3 { font-size: 1.25rem; }
-.root h4 { font-size: 1rem; }
-.root h5 { font-size: 0.875rem; }
+.root h1 {
+  font-size: 2.25rem;
+}
+
+.root h2 {
+  font-size: 1.75rem;
+}
+
+.root h3 {
+  font-size: 1.25rem;
+}
+
+.root h4 {
+  font-size: 1rem;
+}
+
+.root h5 {
+  font-size: 0.875rem;
+}
 
 .root h6 {
   color: #9c9cc4;
@@ -63,7 +79,9 @@
   margin-inline-start: 0.75rem;
 }
 
-.root img { display: inline-block; }
+.root img {
+  display: inline-block;
+}
 
 .root li > ul,
 .root li > ol {
@@ -100,7 +118,9 @@
   color: #f5f5f6;
 }
 
-.root a { color: var(--old--color-cyber-green--50); }
+.root a {
+  color: var(--old--color-cyber-green--50);
+}
 
 .root blockquote {
   display: flex;
@@ -115,9 +135,13 @@
   border-spacing: 0;
 }
 
-.root tbody tr:nth-child(even) { background: #0d0d21; }
+.root tbody tr:nth-child(even) {
+  background: #0d0d21;
+}
 
-.root tbody tr:nth-child(odd) { background: #15152d; }
+.root tbody tr:nth-child(odd) {
+  background: #15152d;
+}
 
 .root table tr th,
 .root table tr td {
diff --git a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
index 10e28d504..9773d082d 100644
--- a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
+++ b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
@@ -36,7 +36,7 @@
   gap: var(--gap--24);
 }
 
-@media (min-width: 60rem) {
+@media (width >= 60rem) {
   .wrapper {
     flex-flow: row wrap;
     gap: var(--gap--32);
diff --git a/packages/cyberstorm/src/components/Table/Table.module.css b/packages/cyberstorm/src/components/Table/Table.module.css
index cad0bca63..4449066ac 100644
--- a/packages/cyberstorm/src/components/Table/Table.module.css
+++ b/packages/cyberstorm/src/components/Table/Table.module.css
@@ -8,7 +8,10 @@
 
 .grid__Headers {
   display: grid;
-  grid-template-columns: var(--dynamic-grid-template-columns, repeat(var(--column-count, auto-fit), minmax(1rem, 1fr)));
+  grid-template-columns: var(
+    --dynamic-grid-template-columns,
+    repeat(var(--column-count, auto-fit), minmax(1rem, 1fr))
+  );
 }
 
 .grid__Headers div:last-child {
@@ -38,7 +41,10 @@
 
 .grid__Row {
   display: grid;
-  grid-template-columns: var(--dynamic-grid-template-columns, repeat(var(--column-count, auto-fit), minmax(1rem, 1fr)));
+  grid-template-columns: var(
+    --dynamic-grid-template-columns,
+    repeat(var(--column-count, auto-fit), minmax(1rem, 1fr))
+  );
   border-bottom: 1px solid #333370;
 }
 
@@ -46,7 +52,9 @@
   border-bottom: none;
 }
 
-.grid__Row:nth-child(even) { background-color: #15152d; }
+.grid__Row:nth-child(even) {
+  background-color: #15152d;
+}
 
 .grid__Row:hover {
   background-color: #191b38;
@@ -77,7 +85,10 @@
 
 .grid__Headers_ItemList {
   display: grid;
-  grid-template-columns: repeat(var(--column-count, auto-fit), minmax(1rem, 1fr));
+  grid-template-columns: repeat(
+    var(--column-count, auto-fit),
+    minmax(1rem, 1fr)
+  );
 }
 
 .grid__Header_ItemList {
@@ -114,7 +125,10 @@
 
 .grid__Row_ItemList {
   display: grid;
-  grid-template-columns: repeat(var(--column-count, auto-fit), minmax(1rem, 1fr));
+  grid-template-columns: repeat(
+    var(--column-count, auto-fit),
+    minmax(1rem, 1fr)
+  );
   background-color: var(--color-surface--3);
 }
 
@@ -145,7 +159,10 @@
 
 .grid__Headers_ItemListSmall {
   display: grid;
-  grid-template-columns: repeat(var(--column-count, auto-fit), minmax(1rem, 1fr));
+  grid-template-columns: repeat(
+    var(--column-count, auto-fit),
+    minmax(1rem, 1fr)
+  );
 }
 
 .grid__Header_ItemListSmall {
@@ -178,7 +195,10 @@
 
 .grid__Row_ItemListSmall {
   display: grid;
-  grid-template-columns: repeat(var(--column-count, auto-fit), minmax(1rem, 1fr));
+  grid-template-columns: repeat(
+    var(--column-count, auto-fit),
+    minmax(1rem, 1fr)
+  );
   background-color: #191b38;
 }
 
diff --git a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css
index 5906bffcf..d3780e437 100644
--- a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css
+++ b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css
@@ -10,9 +10,8 @@
   display: flex;
   flex-flow: wrap;
   gap: var(--gap--8);
-  align-content: center;
+  place-content: center center;
   align-items: center;
-  justify-content: center;
   width: 18.75rem;
   height: 15.625rem;
   padding: var(--space--24);
diff --git a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
index 61effb6ff..d98972c10 100644
--- a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
+++ b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
@@ -107,45 +107,48 @@
 
 .button[data-variant="special"] {
   border: 2px solid transparent;
-  background:
+  background: linear-gradient(
+        284deg,
+        hsl(275deg 64% 11% / 1) 0%,
+        hsl(156deg 46% 12% / 1) 100%
+      )
+      padding-box,
     linear-gradient(
-      284deg,
-      hsl(275deg 64% 11% / 1) 0%,
-      hsl(156deg 46% 12% / 1) 100%
-    ) padding-box,
-    linear-gradient(
-      284deg,
-      hsl(276deg 77% 54% / 1) 0%,
-      hsl(158deg 100% 57% / 1) 100%
-    ) border-box;
+        284deg,
+        hsl(276deg 77% 54% / 1) 0%,
+        hsl(158deg 100% 57% / 1) 100%
+      )
+      border-box;
 }
 
 .button[data-variant="special"]:hover {
-  background:
-    linear-gradient(
-      284deg,
-      hsl(203deg 80% 21% / 1) 0%,
-      hsl(155deg 46% 23% / 1) 100%
-    ) padding-box,
+  background: linear-gradient(
+        284deg,
+        hsl(203deg 80% 21% / 1) 0%,
+        hsl(155deg 46% 23% / 1) 100%
+      )
+      padding-box,
     linear-gradient(
-      284deg,
-      hsl(154deg 65% 67% / 1) 0%,
-      hsl(203deg 92% 63% / 1) 100%
-    ) border-box;
+        284deg,
+        hsl(154deg 65% 67% / 1) 0%,
+        hsl(203deg 92% 63% / 1) 100%
+      )
+      border-box;
 }
 
 .button[data-variant="special"]:active {
-  background:
-    linear-gradient(
-      284deg,
-      hsl(203deg 80% 21% / 1) 0%,
-      hsl(155deg 46% 23% / 1) 100%
-    ) padding-box,
+  background: linear-gradient(
+        284deg,
+        hsl(203deg 80% 21% / 1) 0%,
+        hsl(155deg 46% 23% / 1) 100%
+      )
+      padding-box,
     linear-gradient(
-      284deg,
-      hsl(154deg 65% 67% / 1) 0%,
-      hsl(203deg 92% 63% / 1) 100%
-    ) border-box;
+        284deg,
+        hsl(154deg 65% 67% / 1) 0%,
+        hsl(203deg 92% 63% / 1) 100%
+      )
+      border-box;
 }
 
 /* Button sizes */