@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap";.App{background-color:var(--bg-secondary);height:100vh}.header{background-color:var(--bg-primary);display:flex;justify-content:center;height:var(--header-hight)}.header__content{color:var(--text-body);width:100%;max-width:1200px;display:flex;align-items:center;justify-content:space-between}.header__content--title{color:var(--text-primary);transition:opacity .3s ease;cursor:pointer}.header__content--icon{color:var(--text-primary);transition:opacity .3s ease;font-size:1.75rem;cursor:pointer}.header__content--icon:hover,.header__content--title:hover{opacity:.5}.main{display:grid;place-items:center;padding:1rem 0}.main__content{display:flex;flex-direction:column;margin-top:1rem;gap:1rem;width:100%;max-width:1200px}.main__content--form,.main__content--input{width:100%;max-width:1200px;font-size:1rem}.main__content--input{padding:1rem 1.5rem;border:none}.main__content--inputSend{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-size:2rem;height:100%;display:flex;align-items:center;cursor:pointer;transition:opacity .3s ease}.main__content--inputSend:hover{opacity:.5}.inputControl{position:relative}.main__todoList{padding:1rem;margin-top:1.5rem;display:grid;grid-template-columns:1fr;gap:1rem}.todoItem{background-color:var(--bg-primary);display:flex;border-radius:8px;align-items:center;justify-content:flex-end;gap:1rem;padding:1rem;color:var(--text-body)}.task--done{color:var(--text-success);margin-right:auto!important}.task--check{cursor:pointer;width:1.5rem}.task--delete,.task--edit{cursor:pointer;color:var(--text-body);font-size:1.3rem;transition:color .3s ease}.task--delete:hover{opacity:.5;color:var(--text-error)}.task--edit:hover{opacity:.5;color:var(--text-info)}.task--editInput{margin-right:auto}.task--undone{margin-right:auto!important}@media screen and (max-width: 1200px){.header__content{padding:0 2rem}.header__content--title{font-size:1.5rem}.main__content--form{padding:0 1rem}}@media screen and (min-width: 1201px){.main__todoList{padding:0;grid-template-columns:repeat(2,1fr)}}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:ROBOTO,sans-serif;--bg-primary: #ffffff;--bg-secondary: #e8e8e8;--text-body: #333333;--text-subbody: #666666;--text-error: #ff1744;--text-success: #4caf50;--text-info: #2196f3;--bg-btn: #2196f3;--header-hight: 3.5rem}.App.dark{--bg-primary: #121212;--bg-secondary: #1e1e1e;--text-body: #ffffff;--text-subbody: #aaaaaa;--text-error: #ff5252;--text-success: #4caf50;--text-info: #2196f3;--bg-btn: #2196f3}