From de0409864ab52f6c03d3e756c2cd728c03fb36a2 Mon Sep 17 00:00:00 2001
From: Ketanop321 <146806880+Ketanop321@users.noreply.github.com>
Date: Tue, 4 Jun 2024 09:07:05 +0530
Subject: [PATCH] added scroll bar (#151)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added hover card effect

* aligned footer to center

* modified tablet view of the footer

* add scroollToTop button

---------

Co-authored-by: Shubhadip Bhowmik <57017965+subhadipbhowmik@users.noreply.github.com>

### Add Issue No
<!-- Add Issue No Ex.#1234 -->

### Description
<!-- ✍️ Summarize your changes in one or two sentences -->

### Motivation
<!-- ❓ Why are you making these changes and how do they help readers? -->

### Additional details
<!-- 🔗 Link to Screenshot, Changes or other for more context -->

<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->
---
 src/css/custom.css | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index a4c61d451..4959a5f5e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -169,3 +169,36 @@ h1.center {
 .form-container a:hover {
   text-decoration: underline;
 }
+
+/* Basic styles for the body */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+  height: 200vh; /* Set height to make scrollbar visible */
+  /* Additional styling as needed */
+}
+
+/* Custom scrollbar styles for the entire page */
+html, body {
+  scrollbar-width: thin; /* For Firefox */
+  scrollbar-color: linear-gradient(180deg, #ff7f50, #ff6347) #f1f1f1; /* For Firefox */
+}
+
+/* Webkit-based browsers (Chrome, Safari) */
+html::-webkit-scrollbar, body::-webkit-scrollbar {
+  width: 12px; /* Width of the entire scrollbar */
+}
+
+html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Color of the track */
+}
+
+html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #ff7f50, #ff6347); /* Linear gradient color for the thumb */
+  border-radius: 6px; /* Rounded corners for the thumb */
+}
+
+html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #ff6347, #ff4500); /* Darker gradient on hover */
+}