*{box-sizing:border-box;margin:0;padding:0}#root{background-color:#dfe0ed;height:100vh;padding:30px;position:relative;width:100%}h1,h2,h3,input,p{font-family:ADLaM Display,cursive;-webkit-user-select:none;user-select:none}button{background-color:initial;border:none;cursor:pointer}@media (min-width:600px){#root{border:20px solid #000;border-radius:40px;height:calc(100vh - 100px);padding:60px 20px 10px;position:relative;width:480px}body{display:grid;padding:50px;place-content:center}body .TodoButton{position:absolute;width:calc(100% - 40px)}}.TodoCounter{background:#fff;border-radius:20px;box-shadow:8px 8px 16px #000,-8px -8px 16px #fff;font-size:34px;margin-bottom:40px;padding:40px;text-align:center}.TodoSearch:focus{outline-color:#999}.TodoList{background:#fff;border-radius:10px;box-shadow:8px 8px 16px #000,-8px -8px 16px #fff;display:flex;flex-direction:column;gap:15px;margin-bottom:40px;padding:30px 40px}.TodoItem{grid-gap:20px;align-items:center;background:#fff;border-radius:6px;box-shadow:inset 8px 8px 19px #6a6969,inset -8px -8px 19px #fff;display:grid;gap:20px;grid-template-columns:30px auto 30px;list-style-type:none;min-height:50px;padding:10px}.TodoItem__Completed{background:#fff;box-shadow:inset 20px 20px 47px #fff,inset -20px -20px 47px #eae9e9;color:#555353;opacity:.5;text-decoration:line-through}.TodoItem--text{grid-area:1/1/2/4;text-align:center}.TodoItem__Container{height:30px;width:30px}.TodoItem__Container:hover .TodoItem__Svg{fill:#4a4a4a}.TodoItem__Svg{fill:#6a6969;height:100%;transition:fill .3s;width:100%}.TodoItem__Svg--delete{width:25px}.TodoSearch{align-items:center;background-color:#fff;border:none;border-radius:10px;box-shadow:8px 8px 16px #000,-8px -8px 16px #fff;display:grid;font-size:20px;height:50px;margin-bottom:40px;padding:10px 40px;width:100%}.TodoSearch__loading{-webkit-animation:d5 2s linear infinite alternate;animation:d5 2s linear infinite alternate;background:#848484;border-radius:50%;box-shadow:20px 0 #84848422,-20px 0 #848484;height:12px;margin-left:20px;width:12px}@-webkit-keyframes d5{0%{background:#848484;box-shadow:20px 0 #848484,-20px 0 #84848422}33%{background:#84848422;box-shadow:20px 0 #848484,-20px 0 #84848422}66%{background:#84848422;box-shadow:20px 0 #84848422,-20px 0 #848484}}@keyframes d5{0%{background:#848484;box-shadow:20px 0 #848484,-20px 0 #84848422}33%{background:#84848422;box-shadow:20px 0 #848484,-20px 0 #84848422}66%{background:#84848422;box-shadow:20px 0 #84848422,-20px 0 #848484}}.TodoButton{background-color:#fff;border:none;border-radius:10px;bottom:30px;font-size:30px;height:50px;position:fixed;transition:background-color .3s;vertical-align:middle;width:calc(100% - 60px);z-index:1}.TodoButton,.TodoButton:hover{box-shadow:8px 8px 16px #000,-8px -8px 16px #fff}.TodoButton:hover{background-color:#dbdbdb}.TodosLoading__Container{display:grid;height:190px;place-content:center;width:100%}.TodosLoading{-webkit-animation:s3 1s linear infinite;animation:s3 1s linear infinite;background:radial-gradient(farthest-side,#000 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,#000);border-radius:50%;height:50px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);width:50px}@-webkit-keyframes s3{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes s3{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.TodosEmpty__Text,.TodosError__Text{align-items:center;background:#fff;border-radius:6px;box-shadow:inset 8px 8px 19px #6a6969,inset -8px -8px 19px #fff;display:flex;justify-content:center;min-height:50px;padding:10px;text-align:center}.Modal{background-color:rgba(17,13,13,.647);bottom:0;display:grid;left:0;place-content:center;position:fixed;right:0;top:0}.TodoForm{background-color:#fff;border-radius:10px;box-shadow:-12px -12px 21px #333,12px 12px 21px #000;display:flex;flex-direction:column;max-width:400px;min-height:300px;padding:60px 40px;width:100%}.TodoForm__label{font-family:ADLaM Display,cursive;font-size:34px;line-height:30px;margin-bottom:30px;text-align:center}.TodoForm__textArea{background:#fff;border:2px solid transparent;border-radius:10px;box-shadow:inset -9px -9px 26px #ededed,inset 9px 9px 26px #fff;font-family:inherit;font-family:ADLaM Display,cursive;font-size:20px;margin-bottom:30px;min-height:100px;padding:10px;resize:none}@media (max-width:600px){.TodoForm__textArea:focus{border-color:#9b9b9b}}.TodoForm__buttonContainer{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;place-content:center}.TodoForm__button{background-color:#fff;border-radius:10px;font-family:ADLaM Display,cursive;font-size:20px;height:48px;width:100%}.TodoForm--cancel{box-shadow:inset -9px -9px 26px #ededed,inset 9px 9px 26px #fff}.TodoForm--add{background-color:#dadada;box-shadow:inset -9px -9px 18px #a8a8a8,inset 9px 9px 18px #a8a8a8}
/*# sourceMappingURL=main.02836244.css.map*/