@font-face{font-family:Roboto;src:url(/toDo_list/assets/Roboto-Medium-hSgykTIQ.ttf);font-weight:500}@font-face{font-family:Roboto;src:url(/toDo_list/assets/Roboto-Regular-R3gZys7A.ttf);font-weight:400}*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto}.container{max-width:1140px;width:100%;margin:0 auto;padding:0 15px}a{text-decoration:none}ul{list-style:none}input{outline:unset;border:none}button{border:none;background-color:unset;cursor:pointer}.nav{background-color:#f3edf7;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;padding:20px}.nav__lang{position:relative;height:25px;overflow:hidden;min-width:55px}.nav__lang img{width:25px}.nav__lang-btn{display:flex;font-size:20px;font-weight:500;gap:5px;color:#49454f;position:absolute;align-items:center;top:-100%;left:0;transition:.5s;opacity:0}.nav__lang-btn.active{top:0;opacity:1}.nav__title{font-size:22px;font-weight:400;line-height:28px;text-align:center;color:#1c1b1f}.nav__search,.nav__back,.nav__clear{font-size:30px;color:#49454f}.nav__back svg,.nav__clear svg{display:block}.nav__input{font-size:18px;font-weight:400;line-height:20px;background-color:unset;width:100%}.search{position:absolute;top:-100px;width:100%;transition:.3s;left:0}.search.active{top:0;height:78px}.notes{margin-top:30px}.notes__top{display:flex;justify-content:space-between;align-items:center}.notes__title{font-size:22px;font-weight:400;line-height:28px;color:#323232}.notes__btn{background-color:#f3edf7;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;border-radius:16px;padding:18px;display:flex;align-items:center;gap:12px;color:#6750a4;font-size:22px}.notes__btn span{font-size:16px;font-weight:500;line-height:20px}.notes__box{display:flex;flex-direction:column;gap:30px;margin-top:30px}.notes__box.active{display:grid;grid-template-columns:repeat(3,1fr)}.notes__box.active .notes__card-info{display:flex;flex-direction:column}.notes__card{background-color:#f3edf7;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px}.notes__card-title{font-size:16px;font-weight:500;line-height:24px;letter-spacing:.1px;color:#1c1b1f}.notes__card-date{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;color:#cac4d0}.notes__card-text{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;color:#49454f}.notes__card-btns{display:flex;justify-content:flex-end}.notes__card-info{display:flex;justify-content:space-between}.btn{padding:12px;display:flex;gap:8px;align-items:center;font-size:18px;border-radius:6px;transition:.3s}.btn span{font-size:14px;font-weight:500;line-height:20px;letter-spacing:.1px;text-transform:uppercase}.btn-primary{color:#6750a4}.btn-primary:hover{background-color:#e6ddff}.btn-danger{color:#cf1b1b}.btn-danger:hover{background-color:#ffe1e1}.add{background:#00000059;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-99;opacity:0;pointer-events:none;transition:.5s;transform:scale(0)}.add.active{z-index:99;opacity:1;pointer-events:all;transform:scale(1)}.add__card{width:312px;height:318px;background-color:#f3edf7;border-radius:28px;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;display:flex;flex-direction:column;padding:24px}.add__form{display:flex;flex-direction:column;gap:16px}.add__label{display:flex;flex-direction:column;background:#e7e0ec;padding:5px 10px;border-bottom:1px solid #1C1B1F}.add__label span{font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;color:#6750a4}.add__title{font-weight:400;font-size:24px;line-height:32px;color:#1c1b1f}.add__input{background:#e7e0ec;font-weight:400;font-size:16px;line-height:24px;letter-spacing:.5px;color:#49454f}.add__btns{display:flex;justify-content:flex-end}.add__btns btn{font-size:14px;text-transform:uppercase}.add__btn{background-color:#f3edf7;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;padding:16px;position:absolute;bottom:30px;right:30px;border-radius:16px;color:#6750a4;font-size:20px}
