@charset "UTF-8";@font-face{font-family:Roboto;src:local("RobotoBold"),url(./assets/fonts/Roboto-Bold.woff2) format("woff2"),url(./assets/fonts/Roboto-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:local("Roboto-Regular"),url(./assets/fonts/Roboto-Regular.woff2) format("woff2"),url(./assets/fonts/Roboto-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}.task__item{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:var(--inpPad);border-bottom:1px solid var(--gray);cursor:pointer;animation:anim .5s}.task__item:before{content:"";display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:100%;border:gray 2px solid}@keyframes anim{0%{opacity:0}to{opacity:1}}.task__item.done{transition:.5s}.task__item.done .task__item-title{text-decoration:line-through;color:gray}.task__item.done:before{content:"✔";color:green;font-size:18px}.task__item-title{margin-right:auto;font-size:18px;font-weight:400}.task__btn{display:flex;gap:15px}@media (max-width: 768px){.task__btn{gap:20px}}.task__btn-all{font-weight:700;font-size:18px}@media (max-width: 768px){.task__btn-all{font-size:20px}}.task__btn_del:hover{color:red}.task__btn_del:active{color:#c70000}.task__btn_change{letter-spacing:2px}.task__btn_change:hover{color:#ff8008}.task__btn_change:hover:active{color:#ffc837}@font-face{font-family:Roboto;src:local("RobotoBold"),url(./assets/fonts/Roboto-Bold.woff2) format("woff2"),url(./assets/fonts/Roboto-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:local("Roboto-Regular"),url(./assets/fonts/Roboto-Regular.woff2) format("woff2"),url(./assets/fonts/Roboto-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}.task__list{display:flex;flex-direction:column;gap:10px;padding:0}.task__top{display:flex;align-items:center;justify-content:space-between;gap:50px;border-bottom:3px solid var(--gray);padding:10px 0}.task__top-search{width:100%;border:none;padding-left:10px}.task__top-sort{padding-right:10px}.task__top-sort svg{width:17px;height:17px;fill:#000}.task__top-sort svg:hover{fill:#ff8008}.task__top-sort svg:active{fill:#ffc837}.task__bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:var(--inpPad);color:var(--darkGray)}.task__bottom-block{display:flex;gap:15px}.task__bottom-btn{color:var(--darkGray);transition:0s}.task__bottom-btn:hover{color:var(--black)}.task__bottom-btn.active{padding:5px;border:1px solid var(--title);border-radius:5px}.task__bottom-btn_clear:hover{color:red}.task__bottom-btn_completed:hover{color:green}@media (max-width: 560px){.task__bottom{flex-direction:column}}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.loading{display:flex;align-items:center;justify-content:center;background:none repeat scroll 0 0 #fff;height:100%;width:100%;position:fixed;bottom:0;left:0;right:0;top:0;z-index:9999}.loader{width:48px;height:48px;border:10px solid #FFF;border-radius:50%;position:absolute;transform:rotate(45deg);box-sizing:border-box}.loader:before{content:"";position:absolute;box-sizing:border-box;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:50%;border:10px solid #c9dfec;animation:prixClipFix 2s infinite linear}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}:root{--black: #000;--white: #fff;--gray: #f5f5f5;--darkGray: #a09f9f;--title: #e7e0df;--inpPad: 25px 10px}html{box-sizing:border-box;scroll-behavior:smooth}*,*:before,*:after{box-sizing:inherit}header{margin:16px 0}footer{min-height:50px}body{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background:var(--gray);color:var(--black)}h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none;transition:.3s ease-in-out}a:focus-visible{outline:none}img{max-width:100%}svg,path,rect,input{transition:.2s ease-in-out}input:focus-visible{outline:none}ul{margin:0;padding:0;list-style:none}button{padding:0;border:0;color:var(--black);transition:.3s;cursor:pointer;background:none}button:disabled{cursor:auto}@font-face{font-family:Roboto;src:local("RobotoBold"),url(/assets/Roboto-Bold-OBUL28o9.woff2) format("woff2"),url(/assets/Roboto-Bold-gAeE8GlQ.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:local("Roboto-Regular"),url(/assets/Roboto-Regular-CjbfJjO0.woff2) format("woff2"),url(/assets/Roboto-Regular-ALkwIbN-.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}.container{position:relative;max-width:632px;width:100%;padding:0 16px;margin:0 auto}.wrap{position:relative;background-color:#fff;box-shadow:2px 0 4px #0000001a,0 4px 8px #0000001a;z-index:10}.block{display:flex;align-items:center;border-bottom:3px solid var(--gray);padding:25px 0;gap:20px}.block__btn{padding-left:15px}.block__btn svg{width:17px;height:17px;fill:#000}.block__btn.rotated svg{transform:rotate(180deg)}.title{font-size:72px;color:var(--title);font-weight:400;text-align:center}.task{overflow:hidden;transition:.3s ease-in-out;max-height:100%;will-change:transform,opacity,max-height}.task.hide{opacity:0;max-height:0px;pointer-events:none;transform:translateY(-20px);transition:.3s ease-in-out}.form{display:flex;flex-direction:column;gap:5px;width:100%;padding-right:10px}.form__input{width:100%;border:0}.form__input::placeholder{font-size:18px}@media (max-width: 768px){.form__input::placeholder{text-align:center}}.form__label{color:red}@media (max-width: 768px){.form__label{text-align:center}}.form__btn{display:none;font-weight:400;background-color:var(--title);padding:5px;border-radius:5px}@media (max-width: 768px){.form__btn{display:block}}.form__btn:hover{color:var(--white);background-color:var(--darkGray)}.form__btn:disabled{background-color:#e79070}.empty{padding:var(--inpPad);text-align:center}.page{position:absolute;background-color:#fff;box-shadow:2px 0 4px #0000001a,0 4px 8px #0000001a;height:20px}.page_one{width:93%;bottom:-6px;right:20px;z-index:5}@media (max-width: 560px){.page_one{width:90%}}.page_two{width:91%;bottom:-12px;right:26px;z-index:4}@media (max-width: 560px){.page_two{width:87%}}