global css formatting

ArslanYM · Jun 20, 2023 · 2b9a253 · 2b9a253
1 parent 8a309d4
commit 2b9a253
Showing 1 changed file with 91 additions and 86 deletions.
diff --git a/styles/globals.css b/styles/globals.css
@@ -70,79 +70,119 @@
   }
 
   @media (prefers-color-scheme: dark) {
-  :root {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+    :root {
+      --background: 224 71% 4%;
+      --foreground: 213 31% 91%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+      --muted: 223 47% 11%;
+      --muted-foreground: 215.4 16.3% 56.9%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+      --accent: 216 34% 17%;
+      --accent-foreground: 210 40% 98%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+      --popover: 224 71% 4%;
+      --popover-foreground: 215 20.2% 65.1%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+      --border: 216 34% 17%;
+      --input: 216 34% 17%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+      --card: 224 71% 4%;
+      --card-foreground: 213 31% 91%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 1.2%;
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+      --secondary: 222.2 47.4% 11.2%;
+      --secondary-foreground: 210 40% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+      --destructive: 0 63% 31%;
+      --destructive-foreground: 210 40% 98%;
 
-    --ring: 216 34% 17%;
+      --ring: 216 34% 17%;
 
-    --radius: 0.5rem;
-  }
-  @media (prefers-color-scheme: light) {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+      --radius: 0.5rem;
+    }
+
+    @media (prefers-color-scheme: light) {
+      :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 47.4% 11.2%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 47.4% 11.2%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+        --destructive: 0 100% 50%;
+        --destructive-foreground: 210 40% 98%;
 
-    --ring: 215 20.2% 65.1%;
+        --ring: 215 20.2% 65.1%;
 
-    --radius: 0.5rem;
+        --radius: 0.5rem;
+      }
+    }
+  }
+
+  /*Scroll Bar*/
+  ::-webkit-scrollbar {
+    width: 16px;
+    /* Width of the entire scrollbar */
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 100vw;
+    background: transparent;
+    margin-block: 0.4em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 0.21em solid transparent;
+    border-radius: 100px;
+    background: linear-gradient(#8034e4, #E638EAFF);
+    background-clip: content-box;
+  }
+
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #8034e4 #E638EAFF;
+  }
+
+  /* Internet Explorer and Microsoft Edge */
+  *::-ms-scrollbar {
+    width: 16px;
+  }
+
+  *::-ms-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-ms-scrollbar-thumb {
+    background: linear-gradient(#8034e4, #E638EAFF);
   }
-}
-}
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
@@ -151,7 +191,7 @@
   .c-pointer {
     width: 10vmin;
     height: 10vmin;
-    background: radial-gradient(74% 86% at 67% 38%, #E638EAFF 10%, #073AFF00 100%),linear-gradient(77deg, #F8E7F7FF 2%, #8D8CF1FF 100%);
+    background: radial-gradient(74% 86% at 67% 38%, #E638EAFF 10%, #073AFF00 100%), linear-gradient(77deg, #F8E7F7FF 2%, #8D8CF1FF 100%);
     border-radius: 25%;
     z-index: -10;
     position: absolute;
@@ -164,55 +204,20 @@
     box-shadow: 5vmin 5vmin 5vmin #9f3bf1;
     z-index: 1;
   }
-  
+
   @keyframes cursor {
     0% {
       rotate: 0deg;
       filter: blur(90px);
     }
+
     50% {
       scale: 1.5;
     }
+
     100% {
       rotate: 360deg;
       filter: blur(80px);
     }
-  }  
-}
-
-/*Scroll Bar*/
-::-webkit-scrollbar {
-  width: 16px; /* Width of the entire scrollbar */
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 100vw;
-  background: transparent;
-  margin-block: 0.4em;
-}
-
-::-webkit-scrollbar-thumb {
-  border: 0.21em solid transparent;
-  border-radius: 100px;
-  background: linear-gradient(#8034e4,#E638EAFF);
-  background-clip: content-box;
-}
-
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: #8034e4 #E638EAFF;
-}
-
-/* Internet Explorer and Microsoft Edge */
-*::-ms-scrollbar {
-  width: 16px;
-}
-
-*::-ms-scrollbar-track {
-  background: transparent;
-}
-
-*::-ms-scrollbar-thumb {
-  background: linear-gradient(#8034e4, #E638EAFF);
+  }
 }