improved scroll

src/scss/main.scss

@@ -26,11 +26,12 @@ header {
   height: 100vh;
   width: 100%;
   background-image: url(../img/sp-codes.jpg);
-  background-color: transparent;
+  background-color: #fff;
   background-size: cover;
   background-attachment: fixed;
   background-position: 0 0;
   color: #fff;
+  z-index: 1;
 
   .overlay {
     position: absolute;
@@ -60,11 +61,20 @@ header {
     z-index: 100;
     bottom: 45px;
     left: 50%;
-    margin-left: -24px;
-    width: 48px;
-    height: 48px;
+    margin-left: -32px;
+    width: 64px;
+    height: 64px;
     -webkit-animation: bounce 4s 2s infinite;
     animation: bounce 4s 2s infinite;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 30%;
+      transform: translateY(-10%) rotate(-45deg);
+      border-left: 5px solid #fff;
+      border-bottom: 5px solid #fff;
+    }
   }
 
   @-webkit-keyframes bounce {
@@ -109,8 +119,6 @@ header {
   .items {
     display: flex;
     padding: 1rem;
-    //border: 1px solid #fff;
-    //border-top: none;
   }
 }
 
@@ -639,3 +647,38 @@ footer {
     }
   }
 }
+
+//.back-top {
+//  position: fixed;
+//  right: 8rem;
+//  bottom: 8rem;
+//  width: 40px;
+//  height: 40px;
+//  border-radius: 7px;
+//  background: var(--bs-primary);
+//  z-index: 0;
+//  border: 1px solid #fff;
+//}
+
+.back-top {
+  --offset: 7rem;
+  position: fixed;
+  right: var(--offset);
+  bottom: var(--offset);
+  width: 3rem;
+  aspect-ratio: 1;
+  border-radius: 7px;
+  background: var(--bs-primary);
+  z-index: 0;
+  //border: 1px solid #fff;
+  box-shadow: 0 0 2px 1px rgba(255, 255, 255, .2);
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 30%;
+    transform: translateY(20%) rotate(-45deg);
+    border-top: 5px solid #fff;
+    border-right: 5px solid #fff;
+  }
+}