*{margin:0%;padding:0%}body{background-color:#2e2e2e}.Adding-Todo-List-Div{display:flex;align-items:center;justify-content:space-around;background-color:#85858575;width:850px;height:70px;border-radius:50px;position:absolute;top:10%;left:50%;transform:translate(-50%);padding-right:20px}.Adding-Todo-List-Div input{width:70%;height:70%;border-radius:50px;border:none;outline:none;padding-left:50px;background-color:transparent;color:#fff;font-size:20px}.Adding-Todo-List-Div i{display:flex;align-items:center;justify-content:center;width:50px;height:50px;color:#fff;border-radius:50%;transition:all .4s;cursor:pointer}.Adding-Todo-List-Div i:hover{background-color:#ffffff7e}.Log-out{width:130px;height:40px;background-color:#ffffff54;border:none;border-radius:30px;color:#fff;font-weight:bolder;position:absolute;right:5%;top:5%;cursor:pointer;transition:all .3s}.Log-out:hover{background-color:#fff;color:#000}.text--my-todo{position:absolute;top:20%;left:47%;color:#fff}.buttons-in-todo{gap:10px;display:flex;flex-direction:row;align-items:center}.btns-in-todo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;font-size:15px;border-radius:50%;transition:all .4s;cursor:pointer}.btns-in-todo:hover{background-color:#ffffff7e;rotate:360deg}.DeleteAll-btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;color:#fff;font-size:20px;position:absolute;top:20%;left:65%;border-radius:50%;transition:all .4s;cursor:pointer}.DeleteAll-btn:hover{background-color:#ffffff7e}.todo-lists-div{width:870px;height:600px;border-radius:20px;position:absolute;top:32%;left:50%;transform:translate(-50%);padding-right:40px;overflow:hidden;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:grey transparent;scroll-behavior:smooth;padding-top:10px}.todo-item{display:flex;align-items:center;justify-content:space-between;padding-left:10%;padding-right:10%;margin-top:10px;width:83%;height:13%;background-color:#85858563;border-radius:40px;transition:all .2s}.todo-item:hover{background-color:#85858523}.todo-item .Check-Box{size:50px;cursor:pointer}.todo-item .todo-title{width:200px;height:fit-content;margin-left:30px;text-align:start;margin-right:50%;color:#fff;font-size:20px}.todo-item span{color:#fff}.Empty-Todo{width:500px;height:500px;position:absolute;left:20%;top:10%}.Filter-bar{margin-top:10px;position:absolute;top:25%;left:29%;width:800px;height:50px;display:flex;flex-direction:row;gap:20px}.Filter-bar .Filter-options{width:200px;color:#fff;background-color:#fff9f938;display:flex;align-items:center;justify-content:center;border-radius:30px;cursor:pointer;transition:all .3s}.Filter-bar .Filter-options:hover{color:#000;background-color:#ffffffe0}.login-page-div{border-radius:10px;width:400px;height:500px;background-color:#fff;position:absolute;top:25%;left:40%;text-align:center;transition:all .2s ease}.login-page-div h3{color:#111111a8;font-size:30px;font-family:Courier New,Courier,monospace;position:relative;top:10%}form{position:relative;top:15%}.email-password-h4{color:#00000083}.input-design{width:300px;height:50px;border-radius:30px;padding-left:30px;font-size:17px}.email-block{display:inline;position:relative}.email-block h4{position:relative;right:25%}.password-block{display:inline}.password-block h4{position:relative;right:29%}form p{color:red;display:none}.submit-btn{color:#fff;font-size:17px;font-weight:700;width:330px;height:55px;border-radius:50px;background-color:#000;position:relative;top:30px;border:2px solid white;transition:all .3s;cursor:pointer}.submit-btn:hover{background-color:transparent;border:2px solid #111111;color:#000}.forgot-password{position:relative;left:37%;color:#00000093;font-weight:100;width:fit-content;cursor:pointer}.forgot-password:hover{border-bottom:1px solid rgb(8,8,8)}.dont-have-account{margin-top:10px}.dont-have-account:hover{text-decoration:underline}.Signup-page-div{border-radius:10px;width:400px;height:670px;background-color:#fff;position:absolute;top:15%;left:40%;text-align:center;box-shadow:3px 3px 40px #0c0c0ce3;transition:all .2s ease}.Signup-page-div h3{color:#111111a8;font-size:30px;font-family:Courier New,Courier,monospace;position:relative;top:10%}.UserName-block{display:inline;position:relative;color:#00000096}.UserName-block h4{position:relative;left:-30%}.confirm-password-block{display:inline;position:relative;color:#fff}.confirm-password-block h4{position:relative;left:-22%}.already-have-account{margin-top:40px}.already-have-account:hover{text-decoration:underline}@media only screen and (max-width:600px){.login-page-div{border-radius:10px;width:400px;height:500px;background-color:#fff;position:absolute;top:20%;left:4%;text-align:center;transition:all .2s ease}.Signup-page-div{border-radius:10px;width:400px;height:670px;background-color:#fff;position:absolute;top:10%;left:4%;text-align:center;box-shadow:3px 3px 40px #0c0c0ce3;transition:all .2s ease}.Adding-Todo-List-Div{display:flex;align-items:center;justify-content:space-around;background-color:#85858575;width:350px;height:70px;border-radius:50px;position:absolute;top:10%;left:50%;transform:translate(-50%);padding-right:20px}.Adding-Todo-List-Div input{width:70%;height:70%;border-radius:50px;border:none;outline:none;padding-left:30px;background-color:transparent;color:#fff;font-size:20px}.Adding-Todo-List-Div i{display:flex;align-items:center;justify-content:center;width:50px;height:50px;color:#fff;border-radius:50%;transition:all .4s;cursor:pointer}.Adding-Todo-List-Div i:hover{background-color:#ffffff7e}.Log-out{width:130px;height:40px;background-color:#ffffff54;border:none;border-radius:30px;color:#fff;font-weight:bolder;position:absolute;right:5%;top:3%;cursor:pointer;transition:all .3s}.Log-out:hover{background-color:#fff;color:#000}.text--my-todo{position:absolute;top:20%;left:37%;color:#fff}.buttons-in-todo{gap:10px;display:flex;flex-direction:row;align-items:center}.btns-in-todo{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:10px;width:fit-content;height:40px;color:#fff;font-size:15px;border-radius:50%;transition:all .4s;cursor:pointer}.btns-in-todo:hover{background-color:#fff0;rotate:360deg}.DeleteAll-btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;color:#fff;font-size:20px;position:absolute;top:19.5%;left:80%;border-radius:50%;transition:all .4s;cursor:pointer}.DeleteAll-btn:hover{background-color:#ffffff7e}.todo-lists-div{width:400px;height:600px;border-radius:20px;position:absolute;top:32%;left:54%;transform:translate(-50%);padding-right:40px;overflow:hidden;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:grey transparent;scroll-behavior:smooth;padding-top:10px}.todo-item{display:flex;align-items:center;justify-content:space-between;padding-left:10%;padding-right:10%;margin-top:10px;width:83%;height:13%;background-color:#85858563;border-radius:40px;transition:all .2s}.todo-item:hover{background-color:#85858523}.todo-item .Check-Box{size:50px;cursor:pointer}.todo-item .todo-title{width:200px;height:fit-content;margin-left:30px;text-align:start;margin-right:5%;color:#fff;font-size:20px}.todo-item span{color:#fff}.Empty-Todo{width:500px;height:500px;position:absolute;left:20%;top:10%}.Filter-bar{margin-top:10px;position:absolute;top:25%;left:1%;width:400px;height:50px;display:flex;flex-direction:row;gap:20px}.Filter-bar .Filter-options{width:fit-content;padding:20px;color:#fff;background-color:#fff9f938;display:flex;align-items:center;justify-content:center;border-radius:30px;cursor:pointer;transition:all .3s}.Filter-bar .Filter-options:hover{color:#000;background-color:#ffffffe0}.Empty-Todo{width:400px;height:400px;position:absolute;left:0%;top:10%}}