Improved the background in 3D Distance Calculator (#1706)

Rakesh9100 · Aug 3, 2024 · 5244e6e · 5244e6e
1 parent 5ad9bbf
commit 5244e6e
Showing 1 changed file with 38 additions and 12 deletions.
diff --git a/Calculators/3D-Distance-Calculator/style.css b/Calculators/3D-Distance-Calculator/style.css
@@ -1,23 +1,48 @@
 @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;
     font-weight: 400;
     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,30 +63,31 @@
     color: black;
 }
 
-.display{
+.display {
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     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;
-}
+}