body{
     box-sizing: border-box;
     background-color:rgb(235, 235, 232);
     font-size: 16px;
}

.display{ 
     box-sizing: border-box;
     width: 90%;
     margin: auto;
     display:flex;
     flex-wrap: wrap;
     justify-content:space-evenly;
     margin-top: 2%;
    
}

.section1{ 
     box-sizing: border-box;
     margin-top: 18%;
     width: 500px;
     text-align:justify;
        
}

.big-device-img{ 
     width: 250px;
     height:50px;
}
.small-device-img{
     display: none;
}

h2{ 
   font-family:  Helvetica, Arial, sans-serif;
   font-size:28px;
   line-height:28px ;
   font-weight: lighter;
}

.section2{
     box-sizing: border-box;
     margin-top: 10%;
     width: 400px;
    
}

.account-login{ 
     box-sizing: border-box ;
     background-color: white ;
     border-radius: 10px;  
     width: 100%;
     border:  solid white;
            
}

.form{
     box-sizing: border-box;
     width: 100%;
     display: block;
    
}

.formgroup-input{
    width: 90%;
    height: 3rem;
    display: block;
    margin: auto;
    border: 1px solid rgb(220, 220, 220);
    border-radius:7px ;
    font-size: 1rem;
    margin-top: 1rem; 
}

.formgroup-input:focus{
     outline: 1px solid  rgb(25, 42, 168);
     
}

label{
     display:none ;
}
    

::placeholder{ 
     font-size: 1.1rem;
     opacity: 0.9;
     padding-left: 15px;
               
}

.input-field img{
     display: none;
    
}

#login{ 
     display: block;
     width: 90%;
     margin: auto;
     background-color: #166fe5;;
     color: white;
     border: none;
     padding: 0.8rem;
     font-size: 20px;
     border-radius:10px ;
     margin-top: 1.2rem;
     
}
       
#login:hover{background-color: rgb(9, 60, 226);  }

.forgot-password{
     width: 90%;
     display: block;
     margin: auto;
     text-align: center;
     padding: 10px 10px;
     border-bottom: 1px solid rgb(216, 214, 214);
     padding-bottom: 20px;
     margin-top: 0.5rem;
     margin-bottom:1.5rem ;
     font-size:14px ;
     font-weight: 500;
     font-family: Helvetica, Arial, sans-serif;
     color: #0866ff;
     text-decoration-line: none;}

.forgot-password:hover{ 
     text-decoration-line: underline;
}

.create-new{ 
     display: block;
     width: 45%;
     margin: auto;
     border: none;
     border-radius: 6px;
     text-align: center;
     background-color: #42b72a ;
     color: white;
     font-weight: bold;
     font-size: 17px ;
     padding: 15px 15px;
     text-decoration-line: none;
     margin-bottom: 1.5rem;
             
}

.create-new:hover{ 
     background-color: rgb(8, 154, 8);
}

.link-container{
     box-sizing: border-box;
     width: 100%;
}
                                 
.createpage{ 
     text-align: center;
}

#createpage{ 
     color: black;
     text-decoration: none;
     font-weight: bold;}


#createpage:hover{ 
     text-decoration: underline;
}

footer{
     display: none;
}

/* Mobile Phone responsive style*/
@media only screen and (max-width: 430px) {

     body{
          box-sizing: border-box;
          background-color: rgb(24, 24, 25);

     }

     .section1{
          width: 100%;
     }

     .section1 h2{
          display: none;
     }
     .big-device-img{
          display: none;
     }

     .small-device-img{
          margin: auto;
          display: block;
          width: 60px;
         
     }
    
     .display{ 
          box-sizing: border-box;
          width: 100%;
          margin: auto;
          display:block;
          margin-top: 40%;    
         
     }
     .section2{
          width: 100%;
          margin-top: 25%;
          
     }

     .account-login{ 
          box-sizing: border-box ;
          background-color:rgb(24, 24, 24);  
          width: 100%;
          border:  none;
                 
     }

     .formgroup-input{
          height: 2.3rem;
          background-color:rgb(24, 24, 24);  
          border: 1px solid rgb(123, 119, 119);
          color: white;
          padding-top: 0.8rem;
          padding-left: 0.4rem;
          border-radius: 15px;    
          
     }

     .formgroup-input:focus{
          outline: none;
          border: 1.5px solid rgb(123, 119, 119);
          font-size: 0.8rem;
     }

     .input-field{
          box-sizing: border-box;
          position: relative;
     }

     .formgroup-input::placeholder{
          color: transparent;
     }

    label{
          position:absolute;
          display: block;
          font-size: 1.1rem;
          opacity: 0.9;
          padding-left: 15px;
          color: grey;
          pointer-events:none;
          left: 0.3rem;
          top:1rem;
          transform: translateY(-5%);
          
     }

     .input-field img{
          position:absolute;
          display: block;
          top:1.1rem;
          right: 2rem;
          width: 1rem;
         
     }

    .formgroup-input:focus + label, 
    .formgroup-input:not(:placeholder-shown) + label{
      margin-top: -0.4rem;
      font-size: 0.8rem;
     
     }

     
  
     #login{
          
          font-size: 16px;
          background-color: #7520fe;
          border-radius: 55px;
          
        
     }
   
    .forgot-password{
       border-bottom: none;
       color: white;
    
     }

    main .create-new{
       display: none;
     }

    footer{
       box-sizing: border-box;
       width: 100%;
       margin-top: 3rem;
       margin-bottom: 0px;
      display: block;
     }

    #create-new {
       box-sizing: border-box;
       width: 90%;
       margin: auto;
       border-radius: 60px;
       background-color: rgb(24, 24, 24); 
       border: 1.5px solid rgb(88, 88, 248);
         
     }

     #create-new a{
       display: block;
       color:  rgb(88, 88, 248);
       text-align: center;
       font-size: 0.8rem;
       padding: 3%;
       text-decoration: none;
       font-family: Arial, Helvetica, sans-serif;
     }
    
     .meta{
       box-sizing: border-box;
       width: 100%;
       display: inline-flex;
       align-self: center;

     }
     .meta img{
       width: 10px;
       height: 10px;
       vertical-align: middle;
     }
     .meta p{
       margin: auto;
       font-size: 10px;
       color: lightgrey;
       font-family:Arial;
     }

     .createpage{
       display: none;
     }
     
}