@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
   outline-color: #a5b4fc;
 }
 
 body {
   min-height: 100vh;
   display: grid;
   place-items: center;
 }
 
 p {
   font-size: 14px;
   color: #6b7280;
 }
 
 .login-form {
   width: 500px;
   padding: 32px;
   border-radius: 8px;
   background-color: #ffffff;
   box-shadow: 2px 4px 8px #6b728040;
   text-align: center;
   height:550px;
 }
 
 .header {
   margin-bottom: 48px;
 }
 
 .header h1 {
   font-weight: bolder;
   font-size: 28px;
   color: #8e070e;
 }
 
 .input {
   position: relative;
   margin-bottom: 24px;
 }
 
 .input input {
   width: 100%;
   border: none;
   padding: 8px 40px;
   border-radius: 4px;
   background-color: #f3f4f6;
   color: #1f2937;
   font-size: 16px;
 }
 
 .input input::placeholder {
   color: #6b7280;
 }
 
 .input i {
   top: 50%;
   width: 36px;
   position: absolute;
   transform: translateY(-50%);
   color: #6b7280;
   font-size: 16px;
 }
 
 .login-btn {
   width: 100%;
   border: none;
   padding: 8px 0;
   margin: 24px 0;
   border-radius: 4px;
   background-color:#8e070e;
   color: #ffffff;
   font-size: 16px;
   cursor: pointer;
 }
 
 .login-btn:active {
   background-color: #4f46e5;
   transition: all 0.3s ease;
 }
 
 .social-icons i {
   height: 36px;
   width: 36px;
   line-height: 36px;
   border-radius: 50%;
   margin: 24px 8px 48px 8px;
   background-color: gray;
   color: #ffffff;
   font-size: 16px;
   cursor: pointer;
 }
 
 i.fa-facebook-f {
   background-color: #3b5998;
 }
 
 i.fa-twitter {
   background-color: #1da1f2;
 }
 
 i.fa-google {
   background-color:#8e070e;
 }
 
 a {
   color:#8e070e;
   text-decoration: none;
 }
 .pera{
    font-weight: bold;
    text-align: center;
    color: #8e070e;
 }
.demo{
    box-shadow: 2px 4px 8px #6b728040;
    width: 500px;
    padding: 32px;
    border-radius: 8px;
    height:550px ;
}