*{margin:0;padding:0;box-sizing:border-box}body{background-image:url(/assets/ToDoBackgroundImage-CA9rVhEE.jpg);background-size:cover;background-position:100%}header{position:fixed;top:0%;height:15%;width:100vw;display:flex;flex-direction:row;justify-content:space-between;align-items:center}header .title{margin:20px;font-weight:700;font-size:30px}header .title :hover{color:#ff0;font-size:40px;transition:.3s}header .title a{text-decoration:none}header .title a :hover{color:#ff0;font-size:40px;transition:.3s}header ul{list-style:none;display:flex;flex-direction:row;gap:20px}header ul li{color:#fff;background-color:#0d6efd;margin:20px;font-size:20px;padding:10px;border:2px solid white;border-radius:20px}header ul li a{color:#fff;background-color:#0d6efd;text-decoration:none}.input-container{position:relative;left:25%;top:100px;background-color:#deb887;height:100px;width:50vw;display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;border:5px solid black;border-radius:10px;font-style:italic;font-weight:bolder}.input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;font:30px}.input-container .input-button-container input{border:5px solid black;border-radius:5px;padding:0 20px;width:400px;height:40px}.input-container .input-button-container .btn{margin:10px;height:50px;width:100px;border:2px solid black;color:#fff;background-color:#00f;border-radius:5px}.todo-container{width:50vw;display:flex;flex-direction:row;gap:30px;justify-content:space-between;align-items:center;position:relative;left:25%;top:150px;background-color:#4682b4;border:5px solid white;border-radius:10px}.input-register-container{position:relative;top:200px;left:30%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;height:300px;width:300px;border-radius:10px;box-shadow:#0d6efd;border:5px solid white}.input-register-container h1{font-weight:700;font:50px}.input-register-container .username-container,.password-container{width:250px;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center}.input-register-container button{display:flex;justify-content:center;align-items:center}.input-register-container .username-container input,.input-register-container .password-container input{padding:10px;width:250px;height:35px;border:2px solid black;border-radius:5px}.input-register-container button{width:100px;height:40px;border:5px solid white;background-color:#0d6efd;color:#fff;border-radius:10px}.input-register-container a{position:absolute;right:0;bottom:0;color:#fff;text-decoration:none;padding:10px}.input-register-container a :hover{background-color:#0d6efd;color:#fff}.input-login-container{position:relative;top:200px;left:30%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;height:300px;width:300px;border-radius:10px;box-shadow:#0d6efd;border:5px solid white}.input-login-container h1{font-weight:700;font:50px}.input-login-container .username-container,.password-container{width:250px;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center}.input-login-container button{display:flex;justify-content:center;align-items:center}.input-login-container .username-container input,.input-login-container .password-container input{padding:10px;width:250px;height:35px;border:2px solid black;border-radius:5px}.input-login-container button{width:100px;height:40px;border:5px solid white;background-color:#0d6efd;color:#fff;border-radius:10px}.input-login-container a{position:absolute;right:0;bottom:0;color:#fff;text-decoration:none;padding:10px}.input-login-container a :hover{background-color:#0d6efd;color:#fff}@media (max-width: 480px){*{margin:0;padding:0;box-sizing:border-box}body,.root{background-image:url(/assets/bgImagephonetwo-CPrg1jip.jpg);background-size:cover;height:100vh}.root div{height:100vh}header{height:50px;width:100vw;display:flex;justify-content:center;align-items:center}header .title{font-size:30px;font-weight:bolder;background:linear-gradient(to right,#00c6ff,#00ff6a,#00c6ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.input-container{position:relative;top:100px;display:flex;flex-direction:column;gap:20px;height:130px;width:90vw;left:5%;background-color:#deb887;border:2px solid black;border-radius:10px}.input-container h3{font-size:20px;font-weight:700;font-style:italic;position:absolute;top:5px;color:#5d4037}.input-container .input-button-container{height:90px;width:80vw;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;position:absolute;bottom:2px}.input-container .input-button-container input{height:50px;padding:5px;background-color:#f0f0f0;color:#333;border:2px solid black;border-radius:10px}.input-container .input-button-container .btn{height:50px;width:17vw;border-radius:10px}.todo-container{position:relative;top:130px;width:90vw;height:50px;left:5%;display:flex;flex-wrap:wrap}.todo-container button{border:2px solid black;border-radius:5px;margin:5px;background-color:#4caf50;color:#fff}.todo-container p{font-size:25px;float:right;color:#fff}.footer-container{position:absolute;bottom:5px;display:flex;height:50px;width:100vw;justify-content:space-between;align-items:center}.footer-container h4{color:#fff;margin:10px}.footer-container h4 img{height:20px;position:absolute;bottom:10px;margin:2px;border:1px solid;border-radius:5px}}