@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Josefin Sans,sans-serif}body{overflow:hidden}.flex{display:flex;align-items:center}.MainContainer{width:100vw;height:100vh;position:relative;justify-content:center;z-index:0;padding:20px}.MainContainer img{width:100%;position:absolute;top:0;left:0;right:0;z-index:0}.LoginSignup{gap:10px}.UserDetails{align-items:center;justify-content:center;gap:15px}.ProfilePic{width:40px;height:40px;background-color:#fff;border-radius:50%;color:#000;justify-content:center;overflow:hidden}.ProfilePic i{font-size:24px}.ProfilePic img{object-fit:cover;height:100%;width:100%}.LoginSignup button,.UserDetails button{background:linear-gradient(to bottom right,#60c8ff,#7d2dff);color:#fff;font-weight:700;border:none}.TodoContainer{width:480px;height:520px;z-index:0;border-radius:10px;flex-direction:column;gap:25px;overflow:hidden;padding:20px}.header{justify-content:space-between;width:100%}.header i{font-size:35px}.header h1{letter-spacing:10px;font-weight:600}.inputContainer,.TodoItem{width:100%;padding:15px;border-radius:5px;gap:10px}.inputContainer{padding:10px 10px 10px 28px}.inputContainer input{width:100%;height:inherit;background-color:transparent;color:#fff;outline:none;border:none;font-size:16px}.inputContainer button{background:linear-gradient(to bottom right,#60c8ff,#7d2dff);color:#fff;padding-inline:10px;padding-block:5px;border-radius:10px;border:none;outline:none}.inputContainer input::placeholder{color:#91929a}.Checkbox_container{width:16px;height:16px;border:2px solid white;border-radius:50%;justify-content:center;padding:10px}.Checkbox_container_i{color:#fff;font-size:12px}.Todo_Container,.form_Container{width:100%;height:100%;position:relative;box-shadow:0 0 17px #25273c2f;overflow:hidden;border-radius:10px}.TodoItemsContainer{width:100%;height:320px;border-radius:10px;padding-bottom:100px;overflow-x:hidden;overflow-y:scroll;z-index:0;padding-left:8px}.TodoItemsContainer::-webkit-scrollbar{width:8px;background-color:transparent}.TodoItemsContainer::-webkit-scrollbar-thumb{background-color:#60c8ff;border-radius:5px}.filtersContainer{width:100%;justify-content:space-between;font-size:14px;padding:10px;font-weight:600;background-color:#fff;position:absolute;bottom:0;left:0;right:0;z-index:1}.Filters{gap:10px}.Filters div{cursor:pointer}.hoverDark{color:#000}.hoverLight{color:#fff}.active{color:#4f7ef0}.form_Container{height:auto}.form_Container input:focus{outline:4px solid #60c7ffb0;background-color:transparent;border:1px solid transparent}.form_buttonContainer{flex-direction:column;gap:15px}.form_buttonContainer button{width:100%;padding-block:5px;border:none;border-radius:8px;background:linear-gradient(to bottom right,#60c8ff,#7d2dff);color:#fff}.FormContainer{width:480px;z-index:1;border-radius:10px;flex-direction:column;gap:25px;overflow:hidden;padding:20px}.spinner_container{position:fixed;display:grid;place-content:center;left:0;right:0;top:0;bottom:0;z-index:1}.spinner_container:before{content:"";background-color:#000;opacity:.3;z-index:-1;position:absolute;left:0;right:0;top:0;bottom:0}@media only screen and (max-width: 480px){body{overflow:scroll}.MainContainer{align-items:flex-start}.TodoContainer{margin-top:70px;height:auto}}@media only screen and (min-width: 481px) and (max-width: 1024px){.MainContainer{align-items:flex-start}.TodoContainer{margin-top:150px;transform:scale(1.25)}}