Updating CSS 🚀🫡

style.css

@@ -1 +1,122 @@
+@import url("https://fonts.googleapis.com/css2?family=vazirmatn:wght@400;500;600&display=swap");
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Vazirmatn", sans-serif;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #090909;
+}
+
+.wrapper {
+  width: 450px;
+  overflow: hidden;
+  padding: 28px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
+}
+
+.wrapper .pass-field {
+  height: 65px;
+  width: 100%;
+  position: relative;
+}
+
+.pass-field input {
+  width: 100%;
+  height: 100%;
+  outline: none;
+  padding: 0 17px;
+  font-size: 1.3rem;
+  border-radius: 5px;
+  border: 1px solid #999;
+}
+
+.pass-field input:focus {
+  padding: 0 16px;
+  border: 2px solid #7300ff;
+}
+
+.pass-field i {
+  left: 18px;
+  top: 50%;
+  font-size: 1.2rem;
+  color: #999;
+  cursor: pointer;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.wrapper .content {
+  margin: 20px 0 10px;
+}
+
+.content p {
+  color: #333;
+  font-size: 1.3rem;
+}
+
+.content .requirement-list {
+  margin-top: 20px;
+}
+
+.requirement-list li {
+  font-size: 1.3rem;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.requirement-list li i {
+  width: 20px;
+  color: #aaa;
+  font-size: 0.6rem;
+}
+
+.requirement-list li.valid i {
+  font-size: 1.2rem;
+  color: #7300ff;
+}
+
+.requirement-list li span {
+  margin-left: 12px;
+  color: #333;
+}
+
+.requirement-list li.valid span {
+  color: #999;
+}
+
+@media screen and (max-width: 500px) {
+  body,
+  .wrapper {
+    padding: 15px;
+  }
+
+  .wrapper .pass-field {
+    height: 55px;
+  }
+
+  .pass-field input,
+  .content p {
+    font-size: 1.15rem;
+  }
+
+  .pass-field i,
+  .requirement-list li {
+    font-size: 1.1rem;
+  }
+
+  .requirement-list li span {
+    margin-left: 7px;
+  }
+}