From 5244e6ed497e6f00483126cc305f5456599e5806 Mon Sep 17 00:00:00 2001
From: Unnati gupta <guptaunnati031@gmail.com>
Date: Sat, 3 Aug 2024 11:57:38 +0530
Subject: [PATCH] Improved the background in 3D Distance Calculator (#1706)

---
 Calculators/3D-Distance-Calculator/style.css | 50 +++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/Calculators/3D-Distance-Calculator/style.css b/Calculators/3D-Distance-Calculator/style.css
index f285163b7..10930bb7f 100644
--- a/Calculators/3D-Distance-Calculator/style.css
+++ b/Calculators/3D-Distance-Calculator/style.css
@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-*{
+* {
     margin: 0;
     padding: 0;
     font-family: "Poppins", sans-serif;
@@ -8,16 +8,41 @@
     box-sizing: border-box;
 }
 
-.container{
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    overflow: auto;
+    background: linear-gradient(315deg, rgba(101, 0, 94, 1) 3%, rgba(60, 132, 206, 1) 38%, rgba(48, 238, 226, 1) 68%, rgba(255, 25, 25, 1) 98%);
+    animation: gradient 15s ease infinite;
+    background-size: 400% 400%;
+    background-attachment: fixed;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 0%;
+    }
+
+    50% {
+        background-position: 100% 100%;
+    }
+
+    100% {
+        background-position: 0% 0%;
+    }
+}
+
+.container {
     width: 100%;
-    height: 100dvh;
-    background-color: #e3f9ff;
+    height: 100vh; /* Use vh instead of dvh for compatibility */
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.calc{
+.calc {
     padding: 20px;
     border-radius: 10px;
     background-color: #3a4452;
@@ -29,7 +54,7 @@
     justify-content: center;
 }
 
-.display{
+.display {
     height: 50px;
     width: 250px;
     border-radius: 10px;
@@ -38,7 +63,7 @@
     color: black;
 }
 
-.display{
+.display {
     font-size: 20px;
     display: flex;
     align-items: center;
@@ -46,22 +71,23 @@
     padding: 5px;
 }
 
-form{
+form {
     display: flex;
     gap: 30px;
     margin: 20px 0;
 }
-form input{
+
+form input {
     border-radius: 10px;
     height: 30px;
     width: 150px;
     margin: 5px 5px;
     padding: 5px;
     cursor: pointer;
-    font-size:20px;
+    font-size: 20px;
 }
 
-button{
+button {
     height: 50px;
     width: 150px;
     border: 0;
@@ -70,4 +96,4 @@ button{
     color: white;
     cursor: pointer;
     background: transparent;
-}
\ No newline at end of file
+}