*{
    box-sizing: border-box;
}
.main{
    width:100%;
   
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-inner{
    width:1088px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding:46px 0 46px 0;
}
.informations{
    width:41%;
    padding-top: 40px;
    margin-top: 40px;
}
   .h1{
    font-family: var(--font-family);
        font-size:51px;
        line-height: 51px;
        margin: 0;
        color:var(--black);
        font-weight:bold;
        padding-right: 50px;
        
   }
   .subtitle-txt {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 24px;
    font-style: normal;
    color: var(--black);
    margin-top: 30px;
    padding-right: 62px;
}
   
   


.form{
   
    box-sizing: border-box;
    width: 50%;
    background-color: var(--white);
    justify-content: center;
    align-items: center;
   padding:51px 80px 80px 80px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin-top: 80px;
   
}
form{
    width:100%;
}
.create-count{
    margin: 0;
   
    width:100%;
    font-family: var(--font-family);
    font-size: 22px;
    line-height: 30px;
    font-weight:bold;
    color:var(--black);
    
}

.user-ask {
    font-family: var(--font-family);
    font-weight: normal;
    font-size: 12px;
    color: var(--black);
    margin-top: 16px;
}
.do-login{
    color:#909090;
    font-weight:bold;
    font-family: var(--font-family);
    text-decoration: none;

   margin-top: 15px;
   margin-bottom: 10px;
    font-size:11px;
   padding-bottom: 3px;
   border-bottom: 1px solid #909090;
    
}
.do-login:hover{
    color:#909090;
    text-decoration:none;
}

.address-email{
    margin:0;
    font-family: var(--font-family);
    
    color:var(--black);
    font-weight:500;
    font-size: 12px;
}
input{
    border-top-left-radius:2px;
    border-top-right-radius: 2px;
    font-family: var(--font-family);
   
}
.name-password{
    margin:25px 0 0 0px;
    font-family: var(--font-family);
    
    color:var(--black);
    font-weight:500;
    font-size: 12px;
}
#email-input{
    width:100%;
    height:36px;
    margin:10px 0 0 0px;
    border: none;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dbdbdb;
    padding-left:var(--font-size);
   outline: 0;
   
}
#email-input:hover, #email-input:focus{
    
    transition: 0.1s ease-out;
    
}

#email-input::-webkit-input-placeholder{
    font-family: var(--font-family);
    font-size: 16px;
    color:#9a9a9a;
    font-style: normal!important;
    font-weight: normal!important;
    position: relative;
    
}
::-moz-placeholder{
    font-family: var(--font-family);
    font-size: 16px;
    color:#9a9a9a;
    font-style: normal!important;
    font-weight: normal!important;
   padding-left:var(--font-size);
    position: relative;
   
    
    
}
:-moz-placeholder{
    font-family: var(--font-family);
    font-size: 16px;
    color:#9a9a9a;
    font-style: normal!important;
    font-weight: normal!important;
   padding-left: var(--font-size);
    position: relative;
}
#password1{
    width:100%;
    height:36px;
    margin:7px 0 0 0;
    border: none;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dbdbdb;
    padding-left:var(--font-size);
   outline: 0;
  
}
#password1:hover, #password1:focus{
   
        
        transition: 0.1s ease-out;
        
    }
.eyes{
  color:#9a9a9a;
  width: 24px;
  height: 24px;
   margin-left:-30px;
   position:absolute;
   margin-top:19px;
   cursor: pointer;
  
}
#password2{
    margin-top:10px;
    padding-left:var(--font-size);
}
#password2:hover, #password2:focus{
        transition: 0.1s ease-out;
        
    }
 
.eyes1{
    color:#9a9a9a;
    width: 24px;
    height: 24px;
     margin-left:-30px;
     position:absolute;
     margin-top: 22px;
     cursor: pointer;
}
.confirm-txt{
    margin:25px 0 0 0px;
    font-family: var(--font-family);
 
    color:var(--black);
    font-weight:500;
    font-size: 12px;
}

#password2{
width:100%;
height:36px;
margin:10px 0 0 0;
border: none;
background-color: #f5f5f5;
border-bottom: 1px solid #dbdbdb;

outline: 0;
}


.submit{
    width: 100%;
    height: 48px;
    border-radius: 2px;
   margin:15px 0 0 0;
   display: flex;
   align-items: center;
    justify-content:center;
    cursor: pointer;
    border:none;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight:bold;
    color:var(--white);
    text-decoration: none;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}


.about-password{
    width: 100%;
    margin-top:41px;
    margin-left:auto;
    margin-right:auto;
    font-family: var(--font-family);
    font-size: 10px;
    color:#909090;
    line-height: 14px;
}
.button-txt{
    text-decoration: none;
}

@media screen and (min-width:320px) and (max-width:413px){
    .main-inner{
        width:100%;
        flex-direction: column;
       align-items: center;
        padding-top:50px;
    }
    .informations{
        width:242px;
        padding-top: 0;
    }
    .h1 {
        font-size: 30px;
        line-height: 33px;
        width: 242px;
    }
    .subtitle-txt {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: -0.2px;
        width: 280px;
    }
    .create-count{
        font-size:27px;

    }
    .user-ask {
        font-size: 14px;
    }
    .form{
        width: 100%;
        padding: 40px 39px;
    }
    .address-email,.confirm-txt,.name-password{
        font-size: 15px;
        line-height: 20px;
    }
    .submit{
        width:100%;
    }
}
@media screen and (min-width:414px) and (max-width:767px){
    .main-inner{
        width:100%;
        flex-direction: column;
        padding-top:50px;
        align-items: center;
    }
    .informations{
        width:338px;
        padding-top: 0;
    }
    .h1 {
        font-size: 42px;
        line-height: 45px;
        width: 313px;
    }
    .subtitle-txt {
        font-size: 17px;
        line-height: 26px;
        letter-spacing: -0.2px;
    }
    .form{
        width: 100%;
        padding: 40px 38px;
    }
    .create-count{
        font-size:27px;

    }
    .user-ask {
        font-size: 14px;
    }
    .address-email,.confirm-txt,.name-password{
        font-size: 15px;
        line-height: 20px;
    }
    .about-password{
        font-size: 12px;
        line-height: 16px;
    }
    .submit{
        width:100%;
    }
}
@media screen and (min-width:768px) and (max-width:1023px){
    .main-inner{
        width:644px;
       
        padding-top:50px;
    }
    .informations{
        width:43%;
        padding-top: 40px;
    }
   
    .h1 {
        font-size: 39px;
        line-height: 50px;
        width: 294px;
    }
    .subtitle-txt {
        padding-right: 26px;
    }
    .form{
        width:50%;
        padding: 40px 24px;
    }
}
@media screen and (min-width:1024px) and (max-width:1365px){
    .main-inner{
        width:740px;
       
        padding-top:50px;
    }
    .subtitle-txt {
        padding-right: 37px;
    }
    .informations{
        width:40%;
        padding-top: 40px;
    }
   
    .h1{
        font-size:39px;
        line-height: 50px;
        
    }
    .form{
        width:55%;
        padding: 40px 24px;
    }
}