src/imag/static/index.css

@@ -7,21 +7,32 @@
     font-family: sans-serif;
 }
 
+h1 {
+    color: #fdccd4 !important;
+}
+
 * {
-    color: white
+    color: whitesmoke
 }
 
 body {
     margin: auto;
     max-width: 40em;
     padding: 2em;
-    height: 100%;
-    animation: blurIn 500ms ease-in-out;
-    animation: fadeIn 500ms ease-in-out;
+    height: 100%
+}
+
+@keyframes AnimationName {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
 
 html {
-    background: black;
+    min-height: 100%;
+    background: linear-gradient(130deg, #28282B, #353935) no-repeat;
+    background-size: 200% 200%;
+    animation: AnimationName 30s ease infinite;
 }
 
 h1 {
@@ -45,59 +56,54 @@ img:hover {
 button {
     border: none;
     padding: 0.5em;
+    background-color: #1c1c1c;
     cursor: pointer;
     border-radius: 30px;
-    background-color:#1b1b1b;
-    color:#ffffff;
-    transition: 0.4s ease-out;
+    -webkit-transition: border-radius 0.4s ease-out;
+    -moz-transition: border-radius 0.4s ease-out;
+    -o-transition: border-radius 0.4s ease-out;
 }
 
 button:hover {
     border-radius: 10px;
     cursor: pointer;
-    background-color:#ffffff;
-    color:#000000;
 }
 
 input {
     border: none;
     padding: 0.5em;
+    background-color: #1c1c1c;
     cursor: pointer;
     margin: 2px;
     border-radius: 30px;
-    background-color:#1b1b1b;
-    color:#ffffff;
-    transition: 0.4s ease-out;
+    -webkit-transition: border-radius 0.4s ease-out;
+    -moz-transition: border-radius 0.4s ease-out;
+    -o-transition: border-radius 0.4s ease-out;
 }
 
 input:focus {
     border-radius: 10px;
-    background-color:#ffffff;
-    color:#000000;
 }
 
 input:hover {
     border-radius: 10px;
     cursor: pointer;
-    background-color:#ffffff;
-    color:#000000;
 }
 
 input[type="file"]::file-selector-button {
     border: none;
     padding: 0.5em;
+    background-color: #1c1c1c;
     cursor: pointer;
     border-radius: 30px;
-    background-color:#1b1b1b;
-    color:#ffffff;
-    transition: 0.4s ease-out;
+    -webkit-transition: border-radius 0.4s ease-out;
+    -moz-transition: border-radius 0.4s ease-out;
+    -o-transition: border-radius 0.4s ease-out;
 }
 
 input[type="file"]::file-selector-button:hover {
     border-radius: 10px;
     cursor: pointer;
-    background-color:#ffffff;
-    color:#000000;
 }
 
 .image {
@@ -112,20 +118,3 @@ hr.tiny {
     width:25%;
 }
 
-@keyframes fadeIn {
-    from {
-        opacity:0;
-    }
-    to {
-        opacity:1;
-    }
-}
-
-@keyframes blurIn {
-    from {
-        filter: blur(0.2rem);
-    }
-    to {
-        filter: blur(0rem);
-    }
-}