*{box-sizing:border-box;margin:0;padding:0}body{align-items:center;background-color:#201e1e;display:flex;height:100vh;justify-content:center;padding-left:50px;padding-right:50px}.login_content{background-color:#fff;border-radius:10px;box-shadow:5px 5px 15px 5px #222;padding:40px;width:500px}.login_content form{display:flex;flex-direction:column;gap:30px}.title{text-align:center}.input-box{display:flex;justify-content:center;position:relative;width:420px}.input-box input{border:1px solid #000;border-radius:5px;color:#000;font-size:1em;outline:none;padding:10px;width:100%}.input-box label{color:rgba(0,0,0,.25);font-size:1em;left:0;padding:10px;pointer-events:none;position:absolute;text-transform:uppercase;transition:.5s}.input-box input:focus~label,.input-box input:valid~label{background-color:#fff;border-left:1px solid rgba(0,0,0,.25);border-right:1px solid rgba(0,0,0,.25);color:#000;font-size:.65em;padding:0 10px;transform:translateX(10px) translateY(-5px)}.btn-box{display:flex;justify-content:center}.btn{background-color:#0c99ac;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:18px 30px;transition:all .2s ease-in-out;width:200px}.btn:hover{opacity:.8;transform:scale(1.2)}.alert{padding:20px 30px;text-align:center}.alert-danger{background-color:#d35f5f;border:1px solid #b85353;border-radius:10px;color:#fff}@media screen and (max-width:480px){.login_content{width:400px}.input-box{width:300px}}@media screen and (max-width:450px){.login_content{width:350px}.input-box{width:250px}}