Update button style

index.html

@@ -160,10 +160,7 @@
                 <div class="flex-container column">
                     <p>You want to print this document ?</p>
                     <i></i>
-                    <a href="#" download class="btn icon--download">
-                        Download as PDF
-                        <!-- <i></i><span>Download as PDF</span> -->
-                    </a>
+                    <a href="#" download class="btn btn-icon--download">Download as PDF</a>
                 </div>
             </div>
         </section>

main.scss

@@ -607,7 +607,7 @@ body {
   --start: var(--primary-light);
   --end: var(--secondary);
   background: var(--start);
-  background: linear-gradient(180deg, var(--start) 0%, var(--end) 100%);
+  background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%);
 
   header, footer {
     padding: .5rem clamp(.2rem, 3vw, 2rem);  
@@ -869,6 +869,20 @@ i {
   }
 }
 
+
+
+* {
+  outline-color: #0a76f6;
+  outline-offset: 2px;
+  outline-width: 2px;
+}
+
+*:focus, *:focus-visible {
+  outline-style: solid;
+}
+
+
+
 .btn {
   --hover: var(--dark-2);
   --active: var(--dark-2);
@@ -884,8 +898,18 @@ i {
   align-items: center;
   max-height: none;
   max-width: 100%;
+  cursor: pointer;
+  border: none;
   
-  &[class*="icon"]:before {
+  &:disabled {
+    --hover: inherit;
+    --active: inherit;
+    background-color: #e5e5e5;
+    color: #929292;
+    cursor: not-allowed;
+  }
+
+  &[class*="btn-icon"]:before {
     --icon-size: 1.4rem;
     content: '';
     display: block;
@@ -898,14 +922,14 @@ i {
     margin-right: .5rem;
   }
 
-  &.icon--download:before {
+  &.btn-icon--download:before {
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
   }
 
-  &:hover {
+  &:not(:disabled):hover {
     background-color: var(--hover);
   }
-  &:active {
+  &:not(:disabled):active {
     background-color: var(--active);
   }
 }
@@ -913,10 +937,9 @@ i {
 .download-section {
   text-align: center;
   margin-block: 3.5rem;
-
-  .btn {
-    color: var(--secondary-light);
-  }
+  // .btn {
+  //   color: var(--secondary-light);
+  // }
 
   .content {
     p {