removed scroll bar for large screens and customised it in the why class quiz

frontend/src/app.css

@@ -32,3 +32,24 @@
 		@apply px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50;
 	}
 }
+
+#why-classquiz::-webkit-scrollbar {
+	height: 0.8rem;
+	margin-bottom: 5rem;
+}
+
+#why-classquiz::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 10px 10px transparent;
+	border: solid 3px transparent;
+}
+
+#why-classquiz::-webkit-scrollbar-thumb {
+	box-shadow: inset 0 0 10px 10px #374151;
+	border: solid 3px transparent;
+	border-radius: 15px;
+}
+
+#why-classquiz::-webkit-scrollbar-thumb:hover {
+	box-shadow: inset 0 0 10px 10px #555;
+	border: solid 3px transparent;
+}

frontend/src/routes/+page.svelte

@@ -490,7 +490,8 @@
 				</div>
 			</div>
 			<div
-				class="lg:border-l lg:border-l-black lg:border-t-0 border-t border-t-black flex lg:flex-col flex-row stretch overflow-x-scroll"
+				id="why-classquiz"
+				class="lg:border-l lg:border-l-black lg:border-t-0 border-t border-t-black flex lg:flex-col flex-row stretch overflow-x-auto"
 			>
 				{#each classquiz_reasons as reason, index}
 					<div