login & anim ok

app/assets/styles/intro.css

@@ -16,7 +16,7 @@ body {
     transform-origin: right;
     animation: colorChange 5s linear infinite;
     animation: fadeaway 30s forwards; 
-    left: calc(50% + var(--j) * 50%);
+    left: calc(50%);
     transform: translateX(-50%);
 }
 
@@ -25,14 +25,8 @@ body {
 }
 
 @keyframes colorChange {
-    0% {
-        filter: hue-rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        filter: hue-rotate(360deg);
-        transform: rotate(360deg);
-    }
+    0% { filter: hue-rotate(0deg); }
+    100% { filter: hue-rotate(360deg); }
 }
 
 .glowing span {
@@ -83,7 +77,7 @@ body {
 }
 
 .glowing span:nth-child(3n + 1) {
-    animation: rotatedots 15s alternate infinite;
+    animation: rotatedots1 15s alternate infinite;
 }
 
 .glowing span:nth-child(3n + 2) {
@@ -91,7 +85,7 @@ body {
 }
 
 .glowing span:nth-child(3n + 3) {
-    animation: rotatedots 11s alternate infinite; 
+    animation: rotatedots1 11s alternate infinite; 
 }
         
 @keyframes fadeaway {
@@ -100,16 +94,17 @@ body {
     100% { opacity: 0; }
 }
 
-@keyframes rotatedots {
-    0% { transform: rotate(180deg); }
-    50% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+@keyframes rotatedots1 {
+    0% { transform: rotate(calc(180deg * var(--i))); }
+    50% { transform: rotate(calc(0deg * var(--i))); }
+    100% { transform: rotate(calc(360deg * var(--i))); }
 }
 
+
 @keyframes rotatedots-reverse {
-    0% { transform: rotate(360deg); }            
-    50% { transform: rotate(180deg); }
-    100% { transform: rotate(0deg); }
+  0%   { transform: rotate(calc(135deg * var(--i))); }
+  50%  { transform: rotate(calc(-45deg * var(--i))); }
+  100% { transform: rotate(calc(315deg * var(--i))); }
 }   
 .logointro{
     filter: blur(14px);
@@ -153,21 +148,23 @@ body {
 #login-dialog{
     width: 22rem;
     z-index: 99;
-    border-radius: 2rem;
+    border-radius: 1rem;
     box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
     background: radial-gradient(#82cc50, #0a8200);
-    padding: 2rem 3rem 0 3rem;
+    padding: 2rem 3rem 1rem 3rem;
     margin-top: -68vh;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.5s ease;
     font-size: 1.3rem;
+    transform: perspective(200px) rotateY(0deg) rotateX(6deg) rotateZ(0deg);
+    transform-style: preserve-3d;
 }
 #login-dialog.show {
     opacity: 1;
     visibility: visible;
 }
-#login-dialog > div{
+#login-dialog > div.cols2{
     display: grid !important;
     grid-gap: 10px;
     grid-template-columns: 7rem 15rem;
@@ -185,4 +182,17 @@ body {
 #login-dialog button{
     justify-self: end;
     font-size: 1.3rem;
+    float: right;
+}
+#login-dialog div.loginerr{
+    background-color: #326A1E;
+    font-size: 1rem;
+    color: #FFF;
+    padding: .1rem .5rem;
+    border-radius: 5px;
+    text-align: center;
+    display:none; 
+}
+#login-dialog div.loginerr.show{
+    display:block!important; 
 }