*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:contain}body{font-family:Barlow,sans-serif;background-color:#fff}a{color:inherit}button{background-color:transparent;border:none;cursor:pointer}.container{position:relative}.task__container{max-width:600px;width:100%;margin:0 auto}@media screen and (max-width: 699px){.task__container{padding:0 10px}}@media screen and (min-width: 700px){.task__container{padding-top:50px}}nav{display:none;position:fixed;z-index:2;left:0;right:0;background-color:#fff}nav div{max-width:1920px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}nav h1{font-size:24px;font-weight:400;font-family:Montserrat,sans-serif}nav h1 span{font-weight:500}nav a{display:flex;gap:8px;align-items:center;text-decoration:none}nav a p{color:#0009;transition:color .15s ease-in-out;font-family:Poppins,sans-serif}nav a:hover p{color:#000}nav a svg{color:#000000b3;transition:color .15s ease-in-out}nav a:hover svg{color:#000}@media screen and (min-width: 700px){nav{display:block;top:0;padding:10px 50px;border-bottom:1px solid #e5e7eb}}#add_task{position:fixed;z-index:2;left:0;right:0;height:100dvh;background-color:#000000e6;display:grid;place-items:center}.modal__container{max-width:600px;width:95%;padding:15px;background-color:#fff;border:2px solid #e5e7eb;border-radius:20px}.modal__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px}.modal__input__form{display:flex;flex-direction:column;gap:15px}.modal__input{display:flex;flex-direction:column;gap:8px}.modal__input textarea{min-height:150px;padding:10px;font-size:16px;border:1px solid #e5e7eb;border-radius:15px;outline:none;resize:none}.radio__label{display:flex;align-items:center;color:#303030;font-size:16px;font-weight:400;cursor:pointer}.radio__input{margin:0;visibility:hidden}.radio__input:checked+span{border:2px solid #9a9a9a}.radio__input:checked+span:after{opacity:1}.custom__radio{position:relative;left:-15px;cursor:pointer;width:20px;height:20px;border:2px solid #9a9a9a;border-radius:50%;display:inline-block}.custom__radio:after{content:"";width:12px;height:12px;background:#000;position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.radio__text{position:relative;left:-10px}.modal__input__form button{padding:10px 0;background-color:#000;color:#fff;border-radius:20px;font-size:15px;font-family:Montserrat,sans-serif;font-weight:700;transition:all .15s ease-in-out}.modal__input__form button:hover{background-color:#000000e6}@media screen and (min-width: 700px){#add_task{top:50px}.modal__container{width:100%;padding:30px}}#all__task{position:sticky;z-index:1;top:0}.all__task__container{position:relative}.all__task__header{padding:10px 0;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #e5e7eb}.all__task__header h2{font-weight:500}.all__task__header h2 span:first-child{display:none}.task__btn{background-color:#e5e7eb;color:#000;border:none;border-radius:20px;padding:10px 20px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.task__btn:hover,.task__btn.active{background-color:#000;color:#fff}.task__btn.filter{display:flex;align-items:center;gap:5px}.select__filter__top{position:absolute;bottom:-70px;right:0;background-color:#e5e7eb;display:flex;flex-direction:column;border-left:1px solid #D0D0D0;border-right:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-radius:0 0 10px 10px;overflow:hidden}.select__filter__top button{padding:7px 20px;font-family:Montserrat,sans-serif;font-size:16px}.select__filter__top button:first-child{border-bottom:1px solid #D0D0D0}.select__filter__top button:hover{background-color:#fff}.filter__btn{position:fixed;bottom:10px;right:10px;padding:17.5px;display:grid;place-items:center;background-color:#000;color:#fff;border:none;border-radius:50%;cursor:pointer}.filter__btn.active{border-radius:50px;display:flex;gap:15px;align-items:center}.select__filter__bottom{display:flex;gap:10px}.select__filter__bottom button{padding:0;font-family:Montserrat,sans-serif;color:#fff;font-size:16px}.select__filter__bottom button:hover{text-decoration:underline}.filter__header{background-color:#fff;padding:10px 0;font-family:Poppins,sans-serif;font-size:15px}.filter__header button{background-color:#f3f4f6;padding:7px 15px;display:flex;gap:3px;align-items:center;border:1px solid #e5e7eb;border-radius:20px;transition:all .15s ease-in-out}.filter__header button:hover{background-color:#d0d0d0}.filter__header button h3{font-family:Montserrat,sans-serif;font-weight:500}.task__date{font-family:Poppins,sans-serif;font-size:12px;font-weight:lighter;color:#aeaeae;text-align:end}.tasks__container{padding-bottom:75px;display:flex;flex-direction:column;gap:10px}.task__card{display:flex;flex-direction:column;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px}.task__text{flex:1;font-size:16px;padding:20px 10px}.task__operation{padding:10px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e5e7eb}.task__status{font-size:14px;font-family:Montserrat,sans-serif}.task__status.Incomplete{color:orange}.task__status.Complete{color:#00d100}.task__operation__btn{display:flex;align-items:center;gap:5px}.task__operation__btn button{width:33px;height:33px;display:grid;place-items:center;background-color:#e5e7eb;color:#000;border-radius:50%;transition:all .15s ease-in-out}.task__operation__btn button:hover{background-color:#000;color:#fff}@media screen and (max-width: 699px){.task__btn.filter,.select__filter__top{display:none}}@media screen and (min-width: 700px){.all__task__header h2 span:first-child{display:block}.all__task__header h2 span:last-child{display:none}#all__task{top:50px}.filter__btn,.filter__btn.active{display:none}.tasks__container{padding-bottom:10px}}