Neumorphic Login Form/style.css
/* Importing font*/ 
@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@500&display=swap');


/* Body */
body{
  margin:0;
  width:100vm;
  height:100vh;
  background:#ecf0f3;
  display:flex;
  align-items:center;
  text-align:center;
  place-items:center;
  overflow:hidden;
  font-family: 'KoHo', sans-serif;
  
}


.container{
  width:350px;
  height:520px;
  background:#ecf0f3;
  padding:40px;
  border-radius:20px;
  box-sizing : border-box;  
  box-shadow : 14px 14px 20px #cbced1, -14px -14px 20px white;
  
  /* Centering the div element*/
  position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;  	
	margin: auto;
}

/* Logo */
.brand-logo{
  height:100px;
  width:100px;  
   background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTinbvOM0q29f5Ul01M4SrtmXFR1qvjIpOfo6xx5KRaGvtLlGILE5A-xXoSxDY2geCiK4g&usqp=CAU");
   background-size: 160px;
   background-position:-30px;
  margin:auto;
  border-radius:50%;
  box-sizing : border-box;
  box-shadow:7px 7px 10px #cdced1, -7px -7px 10px white;
}
 /* ---------------------- */

/* Title */
.title{
  margin-top:10px;
  font-weight:900;
  font-size:1.6rem;
  color: #1DA1F2;
  letter-spacing:1px;
}

/* --------------- */

/*  Input fields */

.inputsFields{
  text-align:left;
  margin-top:30px;
}
label,input,button{
  display:block;
  width:100%;
  padding:0;
  border:none;
  outline:none;
  box-sizing : border-box;
}

label{
  margin-bottom:4px;
  font-size:16px;
}
label:nth-of-type(2){
  margin-top:14px;
}

input{
  background: #ecf0f3;
  padding:10px;
  padding-left:20px;
  font-size:14px;
  border-radius:50px;
  height:50px;
  box-shadow:inset 6px 6px 6px #cdced1, inset -6px -6px 6px white;
}

input::placeholder{
  color:gray;
}

button{
  margin-top:20px;
  background:#1DA1F2;
  height:40px;
  border-radius:20px;
  cursor:pointer;
  font-weight:900;
  font-family: 'KoHo', sans-serif;
  letter-spacing:1px;
  box-shadow:6px 6px 6px #cdced1, -6px -6px 6px white;
  transition:0.5s;
}
button:hover{
  box-shadow:none;
}
 /* --------------------------- */
.line{
  color:#1DA1F2;
  font-size:13px;
  letter-spacing:0.2px;
  margin-top:15px;
}

#dot{
  vertical-align: super;
  font-weight:600;
}

