now users can add another users to the list, need to change the form …

…style

css/form.css

@@ -0,0 +1,181 @@
+:root {
+  --c-text-primary: #282a32;
+  --c-text-secondary: #686b87;
+  --c-text-action: #404089;
+  --c-accent-primary: #434ce8;
+  --c-border-table: rgba(67, 76, 232, 0.2);
+  --c-background-table: #e0ebfc;
+  --c-border-primary: #eff1f6;
+  --c-background-primary: #ffffff;
+  --c-background-secondary: #fdfcff;
+  --c-background-tertiary: #ecf3fe;
+  --c-background-quaternary: #ccced4;
+}
+
+.login-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  padding: 40px;
+  transform: translate(-50%, -50%);
+  background: var(--c-background-primary);
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(0,0,0,.6);
+  border-radius: 10px;
+}
+
+
+.login-box .user-box {
+  position: relative;
+}
+
+.login-box .user-box input {
+  width: 100%;
+  padding: 10px 0;
+  font-size: 16px;
+  color: var(--c-accent-primary);
+  margin-bottom: 30px;
+  border: none;
+  border-bottom: 1px solid var(--c-text-action);
+  outline: none;
+  background: transparent;
+}
+.login-box .user-box label {
+  position: absolute;
+  top:0;
+  left: 0;
+  padding: 10px 0;
+  font-size: 16px;
+  color: var(--c-text-action);
+  pointer-events: none;
+  transition: .5s;
+}
+
+.login-box .user-box label{
+  top: -20px;
+  left: 0;
+  color: var(--c-text-action);
+  font-size: 12px;
+}
+
+.login-box form a {
+  position: relative;
+  display: inline-block;
+  padding: 10px 20px;
+  color: var(--c-accent-primary);
+  font-size: 16px;
+  text-decoration: none;
+  text-transform: uppercase;
+  overflow: hidden;
+  transition: .5s;
+  margin-top: 40px;
+  letter-spacing: 4px
+}
+
+.login-box a:hover {
+  background: var(--c-accent-primary);
+  color: #fff;
+}
+
+#deletar:hover{
+  background-color: red;
+  color: #fff
+}
+
+.login-box a span {
+  position: absolute;
+  display: block;
+}
+
+.login-box a span:nth-child(1) {
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #03e9f4);
+  animation: btn-anim1 1s linear infinite;
+}
+
+@keyframes btn-anim1 {
+  0% {
+    left: -100%;
+  }
+  50%,100% {
+    left: 100%;
+  }
+}
+
+.login-box a span:nth-child(2) {
+  top: -100%;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, #03e9f4);
+  animation: btn-anim2 1s linear infinite;
+  animation-delay: .25s
+}
+
+@keyframes btn-anim2 {
+  0% {
+    top: -100%;
+  }
+  50%,100% {
+    top: 100%;
+  }
+}
+
+.login-box a span:nth-child(3) {
+  bottom: 0;
+  right: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(270deg, transparent, #03e9f4);
+  animation: btn-anim3 1s linear infinite;
+  animation-delay: .5s
+}
+
+.form-footer{
+  display: flex;
+  justify-content: space-between;
+}
+.login-box span{
+  color: #282a32;
+}
+.close{
+  position:absolute;
+  right: 10px;
+  top: 10px;
+  background-color: var(--c-background-primary);
+  color:#282a32;
+  font-size: larger;
+  font-weight: 200;
+}
+
+@keyframes btn-anim3 {
+  0% {
+    right: -100%;
+  }
+  50%,100% {
+    right: 100%;
+  }
+}
+
+.login-box a span:nth-child(4) {
+  bottom: -100%;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(360deg, transparent, #03e9f4);
+  animation: btn-anim4 1s linear infinite;
+  animation-delay: .75s
+}
+
+@keyframes btn-anim4 {
+  0% {
+    bottom: -100%;
+  }
+  50%,100% {
+    bottom: 100%;
+  }
+}

css/home.css

@@ -962,14 +962,11 @@ textarea{
 
 .form{
 	position:absolute;
-	left:25%;
-	right:25%;
-    width: 50%;
-    height:min-content;
-    top:5%;
-    bottom:5%;
-    padding: 20px;
-    font-size: 20px;
+	left:50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+    width:70%;
+    height:fit-content;
     box-shadow: 0px 0px 3px #000;
     border:0px;
     border-radius: 10px;