.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#fff;border-bottom:1px solid #ddd}.navbar__left .navbar__logo h1{font-size:24px;margin:0;color:#333}.navbar__right{display:flex;gap:15px}.navbar__button{padding:10px 20px;font-size:14px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s,border .3s}.navbar__button:hover{background-color:#45a049}body.dark-mode{background-color:#121212;color:#fff}body.dark-mode .navbar{background-color:#333;border-bottom:1px solid yellow}body.dark-mode .navbar__left .navbar__logo h1{color:#ff0}body.dark-mode .navbar__button{background-color:transparent;border:2px solid yellow;color:#ff0}body.dark-mode .navbar__button:hover{background-color:#ff0;color:#333}.input__todo{border-radius:12px;border:2px solid #fbc02d;padding:8px 15px;background-color:#fff8e1;transition:all .3s ease}.input__todo__form{display:flex;justify-content:center;gap:10px;padding:5px;background-color:#f1f8e9;border-radius:8px}.input__todo__add__button{border-radius:12px;padding:8px 16px;font-size:14px;background-color:#fbc02d;color:#fff;border:none;cursor:pointer;transition:background-color .3s,transform .2s}.input__todo__add__button:hover{background-color:#f57f17;transform:scale(1.05)}.input__todo__form.dev-mode{border:2px dashed rgb(235,238,23)}body.dark-mode .input__todo{border:2px solid #ffeb3b;background-color:#333;color:#fff}body.dark-mode .input__todo__form{background-color:#424242}body.dark-mode .input__todo__add__button{background-color:#ffeb3b;color:#333}body.dark-mode .input__todo__add__button:hover{background-color:#c8b900}.display__todo{display:flex;justify-content:space-between;padding-left:1rem;margin:.5rem;align-items:center;border:1px solid #ddd;background-color:#fff}.display__todo__buttons{display:flex;align-items:center}.display__todo__buttons button{margin:1rem;padding:.5rem;cursor:pointer;border:2px solid #ddd;background-color:transparent;color:#333;transition:all .3s ease}body.dark-mode .display__todo{background-color:#555;color:#fff;border:1px solid yellow}body.dark-mode .completed__todo{background-color:#333;color:#fff}body.dark-mode .display__todo__buttons button{border:2px solid yellow;background-color:transparent;color:#ff0}body.dark-mode .display__todo__buttons button:hover{background-color:#ff0;color:#333}.display__todo.dev-mode{border:2px dashed tomato}.display__todo__single.dev-mode{border:2px solid oldlace}.display__todo__buttons.dev-mode,.display__todo__buttons.dev-mode button{border:2px solid magenta}