@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');
body{
 font-family: 'Open Sans', sans-serif;
 background: cadetblue;        
}
.text-container{
 justify-content:center;
 align-items:center;
 min-height: 100vh;
 display:flex;
}
.text-wrapper{
 width:460px;
 background: transparent;
 padding: 20px;
}
.text-copy-right{
 margin: 15px 0;
 font-size:16px;
}
.text-copy-right a{
 text-transform:uppercase;
 color:#fff;
 text-decoration:none;
}
.main-container{
   background: url('../images/background.jpg') no-repeat; 
 min-height: 100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 background-size:cover;
 background-position:center;
}
.wrapper{
 width:460px;
 background: transparent;
 border: 2px solid rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(20px);
 box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
 padding:30px 40px;
 border-radius:10px;
}
.wrapper h1{
 font-family: 'Open Sans', sans-serif;
 text-transform:uppercase;
 color:#fff;
}
.wrapper .input-box{
 position: relative;
 width: 100%;
 height: 50px;
 margin: 24px 0;
}
.wrapper .input-box input{
 width: 100%;
 height: 100%;
 background: transparent;
 border:none;
 outline:none;
 border: 2px solid rgba(255, 255, 255, 0.2);
 border-radius:40px;
 font-size:16px;
 color:#fff;
 padding-left:15px;
}
.wrapper .input-box input::placeholder{
 color:#fff;
 font-size:16px;
}
.wrapper .input-box i{
 position:absolute;
 right:20px;
 top:45%;
 transform:translateY(-50%);
 font-size: 20px;
 color:#fff;
}
.wrapper .remember-forgot {
 display: flex;
 justify-content:space-between;
 font-size:16px;
 margin:10px 0;
 color:#fff;
}
.wrapper .remember-forgot label input {
 accent-color:#fff;
 margin-right:3px;
}
.wrapper .remember-forgot a{
 color:#fff;
 text-decoration:none;
}
.wrapper .remember-forgot a:hover{
 text-decoration:underline;
}
.wrapper .btn{
 width: 100%;
 height: 45px;
 background:#fff;
 border:none;
 outline:none;
 border-radius:40px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 margin:15px 0;
 font-size:16px;
 color:#333;
 font-weight:600;
 text-transform:uppercase;
 transition: 1s;
}


.wrapper .btn:hover{
   background: cadetblue;
   transition: 1s;
}