Fix stylelint error

.stylelintrc.json

@@ -1,3 +1,13 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-html"]
+  "extends": ["stylelint-config-standard", "stylelint-config-html"],
+  "rules": {
+    "selector-id-pattern": null,
+    "selector-class-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
 }

src/components/ErrorPage.astro

@@ -13,8 +13,8 @@ const { pageId, paddingTop } = Astro.props;
     font-size: 16px;
     font-family: "Lucida Grande", Arial, sans-serif;
     position: relative;
-    bottom: 0px;
-    padding: 0px;
+    bottom: 0;
+    padding: 0;
     min-height: 640px;
     margin: 0;
     width: 100%;
@@ -25,7 +25,7 @@ const { pageId, paddingTop } = Astro.props;
   .blue,
   .title :global(.blue),
   .description :global(.blue) {
-    color: rgb(77, 188, 233);
+    color: rgb(77 188 233);
   }
 
   .pageTitle {
@@ -42,42 +42,50 @@ const { pageId, paddingTop } = Astro.props;
     font-weight: 600;
     margin-bottom: 30px;
   }
+
   strong {
     line-height: 1.5;
   }
+
   a,
   .title :global(a),
   .description :global(a) {
-    color: rgb(77, 188, 233);
+    color: rgb(77 188 233);
     text-decoration: none;
-    border: 0px;
+    border: 0;
   }
+
   a:hover,
   .title :global(a:hover),
   .description :global(.blue) {
-    color: rgb(77, 188, 233);
+    color: rgb(77 188 233);
   }
+
   .spaceHolder {
     min-height: 100px;
   }
+
   .logo {
     margin: auto;
     margin-top: -375px;
   }
+
   .logo img {
     border: none;
   }
+
   .logo img:hover {
     padding-top: 2px;
   }
+
   .bg {
     background-image: url("/images/notfound-bg.png");
     background-repeat: no-repeat;
     background-position: bottom center;
     min-height: 640px;
     height: 100%;
     margin: auto;
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 
   .list {
@@ -92,7 +100,7 @@ const { pageId, paddingTop } = Astro.props;
 
   .list :global(a) {
     text-decoration: underline;
-    border: 0px;
+    border: 0;
     color: black;
     padding-left: 10px;
   }

src/components/RequestDeviceCard/requestDeviceCard.css

@@ -7,11 +7,12 @@
   background: var(--white);
   border: 1px solid var(--gray-5);
   box-sizing: border-box;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 4px rgb(0 0 0 / 6%);
   border-radius: 10px;
   padding: 56px 40px;
 }
-@media (min-width: 992px) {
+
+@media (width >= 992px) {
   .request-device-section {
     width: 100%;
     padding: 60px 200px;
@@ -25,11 +26,10 @@
 }
 
 .request-device-section__desc {
-  margin: 20px 0 0 0;
+  margin: 20px 0 0;
   font-size: 14px;
   font-weight: 700;
   line-height: 22px;
-
   text-align: center;
   color: var(--black);
 }
@@ -44,7 +44,7 @@
 
 .request-device-section__request-link {
   display: block;
-  margin: 10px 0 0 0;
+  margin: 10px 0 0;
 }
 
 .request-device-section__request-btn {
@@ -64,7 +64,7 @@
   cursor: pointer;
 }
 
-@media (min-width: 680px) {
+@media (width >= 680px) {
   .request-device-section__image {
     width: 194px;
   }

src/pages/developerTools/developer-tools-card.css

@@ -1,21 +1,22 @@
-@keyframes slideIn {
+@keyframes slide-in {
   0% {
     transform: translateY(10%);
     opacity: 0;
   }
+
   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }
 
 .developer-tools-card {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgb(0 0 0 / 10%);
   border-radius: 12px;
   background-color: white;
   padding: 20px;
   height: 100%;
-  font-family: "Red Hat Display";
+  font-family: "Red Hat Display", monospace;
   display: flex;
   flex-direction: column;
   opacity: 0;
@@ -57,9 +58,9 @@
 
 .developer-tools-card:hover {
   cursor: pointer;
-  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 4px 24px rgb(0 0 0 / 16%);
 }
 
 .developer-tools-card.animate {
-  animation: slideIn 0.3s ease-in-out forwards;
+  animation: slide-in 0.3s ease-in-out forwards;
 }