Added parallax background effect

style.css

@@ -1,10 +1,13 @@
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  background-image: url("../images/Clouds.png");
-  background-size: cover;
-  background-position: left;
-  background-attachment: fixed;
+  background-image: url("../images/Bridge.png"), url("../images/Trees.png"),
+    url("../images/Castle.png"), url("../images/Clouds.png"),
+    url("../images/Moon.png");
+  background-size: auto, auto, auto, auto, cover;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
+  background-attachment: scroll, scroll, scroll, scroll, fixed;
+  background-position: left 300vh, left 300vh, left 300vh, left 350vh, left top;
   min-width: 768px;
 }
 
@@ -66,8 +69,7 @@ body {
   margin-top: 2rem;
 }
 
-.title-section,
-.page-bottom-section {
+.title-section {
   position: relative;
   height: 70vh;
   display: flex;
@@ -77,6 +79,26 @@ body {
   align-items: center;
 }
 
+.page-bottom-section {
+  height: 90vh;
+  margin-top: 3rem;
+}
+
+.credits-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.credits-box {
+  display: flex;
+  background: rgba(0, 0, 0, 1);
+  border-radius: 100px;
+  width: 400px;
+  padding: 10px;
+  margin-bottom: 2rem;
+}
+
 .title-box {
   display: flex;
   align-items: center;
@@ -149,7 +171,7 @@ body {
   display: flex;
   margin-top: 10rem;
   gap: 2rem;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: 20px;
   padding: 2rem;
   width: 95%;
@@ -194,7 +216,7 @@ body {
   display: none;
   height: 400px;
   width: 95%;
-  margin: 10PX;
+  margin: 10px;
   justify-content: center;
   align-items: center;
 }
@@ -248,13 +270,11 @@ button:hover {
 
 /* Projects Box */
 
-
-
 .project-box {
   display: flex;
   margin-top: 10rem;
   gap: 2rem;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: 20px;
   padding: 2rem;
   width: 95%;
@@ -421,11 +441,12 @@ button:hover {
   font-weight: bold;
 }
 
-.contact-form input, .contact-form textarea {
+.contact-form input,
+.contact-form textarea {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 .form-buttons {
@@ -451,7 +472,6 @@ button[type="reset"] {
   color: white;
 }
 
-
 /* Media Queries */
 
 @media (min-width: 1440px) {