*{
     padding: 0;
     margin: 0;
     font-family: sans-serif;
}
.hero{
     height: 100vh;
     width: 100%;
     background-image:url(/image/banner.jpg);
     background-position: center;
     background-size: cover;
     position: absolute;
}
.form-box{
   width: 380px;
   height: 480px;
   position: relative;
   margin: 6% auto;
   background: #fff;
   padding: 5px;
   border-radius: 15px;
   box-shadow: 10px 5px 10px  #8bbdc7;
   overflow: hidden;
}
.button-box{
     width: 220px;
     margin: 35px auto;
     position: relative;
     box-shadow: 0 0 20px 9px #ff61241f;
     border-radius: 30px;
}
.toggle-btn{
     padding: 11px 24px;
     cursor: pointer;
     background: transparent;
     border: 0;
     outline: none;
     position: relative;
}
#btn{
     top: 0;
     left: 0;
     position: absolute;
     width: 110px;
     height: 100%;
     background: linear-gradient(to right, #ff105f, #ffad06);
     border-radius: 30px;
     transition: .5s;
}
.social-icons{
margin: 30px auto;
text-align: center;
}
.social-icons img{
     width: 30px;
     margin: 0 12px;
     box-shadow: 0 0 20px 0 #7f7f7f3d;
     cursor: pointer;
     border-radius: 50%;
}
.input-group{
     top: 180px;
     position: absolute;
     width: 280px;
     transition: .5s;
}
.input-field{
     width: 100%;
     padding: 10px 0;
     margin: 5px 0;
     border-left: 0;
     border-top: 0;
     border-right: 0;
     border-bottom: 1px solid #999;
     outline: none;
     background: transparent;
}
.submit-btn{
     width: 85%;
     padding: 10px 30px;
     cursor: pointer;
     display: block;
     background: linear-gradient(to right, #ff105f, #ffad06);
     border: none;
     outline: none;
     border-radius: 30px ;
}
.check-box{
     margin: 30px 10px 30px 0;
}
span{
     color: #777;
     font-size: 12px;
     bottom: 68px;
     position: absolute;
}
#login{
     left: 50px;
}
#register{
     left: 450px;
}