*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}

body{

    height:100vh;

    background:#eef2f7;
}

.container{

    display:flex;

    height:100vh;
}

/* Left Side */

.left-panel{

    flex:1;

    background:linear-gradient(rgba(10,40,70,.8),rgba(10,40,70,.8)),
    url("https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=1200&q=80");

    background-size:cover;

    background-position:center;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;
}

.overlay{

    width:70%;
}

.overlay h1{

    font-size:48px;

    margin-bottom:10px;
}

.overlay h2{

    font-size:34px;

    margin-bottom:25px;

    color:#6dcff6;
}

.overlay p{

    font-size:18px;

    line-height:30px;

    opacity:.9;
}

/* Right Side */

.right-panel{

    width:480px;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;
}

.login-box{

    width:360px;
}

.logo{

    width:90px;

    height:90px;

    background:#0b5ed7;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    margin:auto;

    margin-bottom:25px;
}

.login-box h2{

    text-align:center;

    color:#17365d;

    margin-bottom:8px;
}

.login-box p{

    text-align:center;

    color:#666;

    margin-bottom:35px;
}

.input-group{

    margin-bottom:20px;
}

.input-group label{

    display:block;

    margin-bottom:8px;

    color:#444;

    font-weight:600;
}

.input-group input{

    width:100%;

    padding:14px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:15px;

    transition:.3s;
}

.input-group input:focus{

    outline:none;

    border-color:#0b5ed7;

    box-shadow:0 0 6px rgba(11,94,215,.3);
}

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:14px;
}

.options a{

    text-decoration:none;

    color:#0b5ed7;
}

.options a:hover{

    text-decoration:underline;
}

button{

    width:100%;

    padding:15px;

    background:#0b5ed7;

    color:white;

    border:none;

    border-radius:8px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;
}

button:hover{

    background:#084298;
}

.footer{

    text-align:center;

    margin-top:40px;

    color:#888;

    font-size:13px;
}

/* Responsive */

@media(max-width:900px){

.left-panel{

    display:none;
}

.right-panel{

    width:100%;
}
}