Login page

src/app/login/login.component.css

 form {
-  max-width: 2000px;
-  max-height: 2000px;
-  border-radius: 25px;
-  height: fit-content;
-  width: fit-content;
-  padding: 20px;
   text-align: center;
-  margin: auto auto 0 auto;
-  background-color: white;
-  -webkit-box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
-  box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
+  min-width: 300px;
+  max-width: 400px;
+  min-height: 600px;
+  max-height: 700px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border-radius: 36px;
+  border: 1px solid #2E3192;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 50%;
+  margin-top: 5%;
 }
 
-.v_container {
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  width: 100%;
-  height: 100vh;
-  min-width: 300px;
-  min-height: 1000px;
-  background: rgb(236,160,193);
-  background: radial-gradient(circle, rgba(236,160,193,1) 0%, rgba(130,180,238,1) 100%);
+h2{
+  padding-bottom: 5%;
+  font-family: Montserrat;
+  font-weight: 500;
+  font-size: 36px;
+  line-height: 44px;
+  display: flex;
+  margin-left: 34%;
+  margin-top: 10%;
+  
+  
+  color: #2E3192;
+  font-style: normal;
+}
+
+
+
+.form-group{
+  padding-top: 2%;
+  margin-left: 5%;
+  margin-right: 5%;
+  text-align: left;
 }
 
-.fixed_height {
-  height: 20vh
+input[type=text] {
+  background: #FFFFFF;
+  border: 1px solid #EBDDFF;
+  box-sizing: border-box;
+}
+
+input[type=password] {
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border: 1px solid #EBDDFF;
 }
 
-.container{
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  font-style: normal; 
-  font-variant: normal; 
-  font-weight: bold;
-  vertical-align: middle;
-  line-height:35px;
-  font-size: 120%;
+#line {
+  border-bottom: 1px solid #EBDDFF;
+  margin-left: 5%;
+  margin-right: 5%;
+  padding-top: 5%;
+  margin-bottom: 15%;
 }
 
-#login {
+.label{
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  display: flex;
+  align-items: center;
   text-align: center;
+  
+  color: #2E3192;
+  font-style: normal;
+}
+
+input::placeholder{
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  display: flex;
+  align-items: left;
+  text-align: left;
+  
+  color: #999FDE;
+  font-style: normal;
 }
 
-#submit {
-  border-radius: 25px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+button{
+  background: #EBDDFF;
+  box-sizing: border-box;
+  border-radius: 30px;
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 29px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  border: 2px solid #2E3192;
+
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 29px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #2E3192;
+  font-style: normal;
+
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: 10%;
+
 }
 
-p {
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+#rectangle {
+  width: 200px;
+  height: 100px;
+  background: red;
 }
 
-#signup {
-  border-radius: 25px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+#sos{
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 23.1579px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  font-style: normal;
+
+  color: #FC5C14;
+  border: 1px solid #FF9848;
+  border-radius: 28.9474px;
+  box-sizing: border-box;
+  margin-left: 30%;
+  margin-top: 2%;
+  
 }
 
-input[type=text] {
-  border: none;
-  border-bottom: 2px solid rgb(200, 200, 200);
+.back{
+
+  height: 850px;
+  background: #FFFAE7;
+  background-image: url(../../assets/images/yana-tree-noHands.svg);
+  background-repeat: space;
+  background-image-size: 100%;
+  background-position:  bottom;
 }
 
-input[type=password] {
-  border: none;
-  border-bottom: 2px solid rgb(200, 200, 200);
+p{
+  ont-family: Montserrat;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  
+  color: #2E3192;
+  font-style: normal;
 }
+
+a{
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  text-decoration-line: underline;
+  
+  color: #FC5C14;
+  font-style: normal;
+}
\ No newline at end of file