💅 style(root): changes in css

index.html

@@ -90,7 +90,7 @@
                             <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
                         </svg>
                     </a>
-                    <a href="/documentation" class="btn glow-on-hover">
+                    <a href="/documentation" target="_blank" class="btn glow-on-hover">
                         Documentation
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
                             <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>

style.css

@@ -26,11 +26,10 @@ body {
   position: fixed;
   width: 100%;
   top: 0;
-    background-color: rgba(26, 31, 44, 0.0);
+  background-color: rgba(26, 31, 44, 0);
   z-index: 1000;
   padding-inline: 5rem;
   backdrop-filter: blur(5px);
-    border:
 }
 
 .logo {
@@ -59,7 +58,6 @@ a {
   transform-origin: left;
 }
 
-
 .nav-links {
   display: flex;
   gap: 2rem;
@@ -130,8 +128,19 @@ a {
 }
 
 .glow-on-hover:before {
-    content: '';
+  content: "";
-    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+  background: linear-gradient(
+    45deg,
+    #ff0000,
+    #ff7300,
+    #fffb00,
+    #48ff00,
+    #00ffd5,
+    #002bff,
+    #7a00ff,
+    #ff00c8,
+    #ff0000
+  );
   position: absolute;
   top: -2px;
   left: -2px;
@@ -142,12 +151,12 @@ a {
   height: calc(100% + 4px);
   animation: glowing 20s linear infinite;
   opacity: 0;
-    transition: opacity .3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
   border-radius: 10px;
 }
 
 .glow-on-hover:active {
-    color: #000
+  color: #000;
 }
 
 .glow-on-hover:active:after {
@@ -160,7 +169,7 @@ a {
 
 .glow-on-hover:after {
   z-index: -1;
-    content: '';
+  content: "";
   position: absolute;
   width: 100%;
   height: 100%;
@@ -171,9 +180,15 @@ a {
 }
 
 @keyframes glowing {
-    0% { background-position: 0 0; }
+  0% {
-    50% { background-position: 400% 0; }
+    background-position: 0 0;
-    100% { background-position: 0 0; }
+  }
+  50% {
+    background-position: 400% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
 }
 
 .btn {
@@ -418,8 +433,6 @@ a {
   .platform-grid {
     grid-template-columns: 1fr;
   }
-    
-    
 }
 .footer {
   background-color: #000;
@@ -462,7 +475,7 @@ left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
-transition: .4s;
+  transition: 0.4s;
 }
 
 .slider:before {
@@ -473,7 +486,7 @@ width: 22px;
   left: 4px;
   bottom: 4px;
   background-color: white;
-transition: .4s;
+  transition: 0.4s;
 }
 
 input:checked + .slider {
@@ -612,6 +625,5 @@ nav.navbar{
   }
   .desktop-card p {
     text-align: left;
-    
   } 
 }