From e2070496441dfe120d1a4bf2d690bc1c08e3173a Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Sat, 8 Jan 2022 12:03:43 -0800
Subject: [PATCH] dont know what i did but i like it

---
 css/login.less | 30 ++++++++++++++++++------------
 login.html     |  6 ------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/css/login.less b/css/login.less
index 4e20570..d1dce59 100644
--- a/css/login.less
+++ b/css/login.less
@@ -145,15 +145,16 @@ form{
 	z-index: 1;
 	
 	li{
-		position: relative;
+		position: absolute;
 		// list-style: none;
 		display: block;
 		width: 40px;
 		height: 40px;
 		background-color: fade(white, 15%);
 		// bottom: -160px;
-		// make bottom the edge of the screen
-		bottom: -600px;
+		// make the squares spawn from the bottom of the screen determined by the height of the screen
+		// bottom: calc(-100% + 100px);
+		bottom: calc(100% - 1000px);
 		
 		-webkit-animation: square 25s infinite;
 		animation:         square 25s infinite;
@@ -240,21 +241,26 @@ form{
 	}
 }
 
+// add sqaure animation that moves from bottom up and rotates then fades with steps
+
+
 @-webkit-keyframes square {
   0%   { transform: translateY(0); }
   100% { transform: translateY(-10000px) rotate(600deg); }
 }
 @keyframes square {
   0%   { transform: translateY(0); }
-  100% { transform: translateY(-1000px) rotate(600deg); }
+  90% { transform: translateY(-1000px) rotate(600deg); }
+	//   add fade after the animation
+
 }
 
 // animation for square to fade out
-@-webkit-keyframes fade {
-  0%   { opacity: 1; }
-  100% { opacity: 0; }
-}
-@keyframes fade {
-  0%   { opacity: 1; }
-  100% { opacity: 0; }
-}
+// @-webkit-keyframes fade {
+//   0%   { opacity: 1; }
+//   100% { opacity: 0; }
+// }
+// @keyframes fade {
+//   0%   { opacity: 1; }
+//   100% { opacity: 0; }
+// }
diff --git a/login.html b/login.html
index a397c2e..146be2a 100644
--- a/login.html
+++ b/login.html
@@ -32,10 +32,4 @@
         </ul>
     </div>
 </body>
-<script>
-    less = {
-       env: "production",
-    };
- </script>
-<!-- <script src="js/less.js" type="text/javascript"></script> -->
 <script src="js/less.js" data-env="production"></script>
\ No newline at end of file