@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

:root {
 
  --left-box-color: #212529;
  --right-box-color: #fff;
  --shadow-color: 0 0 40px 0 #e1e1e1;
  --left-box-text:#fefeff;
  --button-text:#fff;

}
.myform-area{
  display: flex;
  align-items: center; 
  justify-content: center; 
  height: 100vh; 
  overflow: hidden;
  padding: 60px 0;
  position: relative;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.myform-area .form-area{
  position: relative;
  background: var(--left-box-color);
  width: 100%;
  height: 400px;
  overflow: hidden;
  box-shadow:var(--shadow-color);
}

.myform-area .form-area .form-content,
.myform-area .form-area .form-input{
    height: 100%;
    float: left;
    box-sizing: border-box;
}

.myform-area .form-area .form-content{
  width: 50%;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.myform-area .form-area .form-content h2{
  color: var(--left-box-text);
  text-align: center;
  margin-bottom: 20px; 
}

.myform-area .form-area .form-content p{
  color: var(--left-box-text);
}

.myform-area .form-area .form-content ul{
  margin-top: 50px;
}

.myform-area .form-area .form-content ul li{
  display: inline-block;
  margin-right: 10px;
}
.myform-area .form-area .form-content a i{
    margin-right: 10px;
}

.myform-area .form-area .form-input{
  position: relative;
  overflow: hidden;
  /* box-shadow: var(--shadow-color); */
  display: flex;
  justify-content: center; 
  align-items: center; 
}
.myform-area .form-area .form-input{
    width: 50%;
    background: var(--right-box-color); 
    padding: 40px 30px;
}

.myform-area .form-area .form-text{
    margin-top: 30px;
}

.myform-area .form-area .myform-button{
    margin-top: 30px;
    width: 100%;
}


.myform-area .form-area .form-input img {
    max-width: 110%; 
    max-height: 150%;
    display: block; 
    margin: auto; 
  }

  .btn-login {
    background-color: #6f42c1;
    color: var(--left-box-text);
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    text-align: center;
  }