@font-face{font-family:Roboto;src:url(/todo-react-js/assets/Roboto-Regular-ia0dPpEo.ttf);font-width:400}@font-face{font-family:Roboto;src:url(/todo-react-js/assets/Roboto-Medium-BJbjO3wX.ttf);font-width:500}*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto;font-weight:400}a{text-decoration:none}ul{list-style:none}.container{max-width:1320px;width:100%;margin:0 auto;padding:0 15px}button,input{border:none;outline:none;cursor:pointer;background:none}.header{background:#f3edf7;box-shadow:0 1px 3px #0000004d,0 4px 4px #00000040;padding:20px}.header__nav{display:flex;justify-content:space-between;align-items:center}.header__nav-lang{font-size:22px;font-weight:700;text-transform:uppercase}.header__nav-title{font-size:22px;line-height:127%;font-weight:400}.header__search{display:flex;justify-content:space-between;align-items:center}.header__search-input{width:80%}.notes{margin-top:30px}.notes__top{display:flex;justify-content:space-between}.notes__top-title{font-weight:400;font-size:22px;line-height:127%;color:#323232}.notes__top-btn{border-radius:16px;padding:16px 20px 16px 16px;width:121px;height:56px;box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;background:linear-gradient(#6750a41c,#6750a41c),#fffbfe;display:flex;align-items:center;justify-content:center;gap:12px}.notes__top-btn span{font-size:14px;font-weight:500;line-height:143%;color:#6750a4}.notes__list{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.notes__list.active{grid-template-columns:1fr}.notes__item{border-radius:16px;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;background:#6750a40d;padding:16px}.notes__item-text{font-weight:400;font-size:14px;line-height:143%;color:#49454f;margin:16px 0}.notes__item-btns{display:flex;justify-content:flex-end}.notes__item-btn{padding:10px 12px;display:flex;align-items:center;gap:8px;border-radius:5px}.notes__item-btn span{font-weight:500;font-size:14px;line-height:143%;text-transform:uppercase}.notes__item-top.active{display:flex;justify-content:space-between;align-items:center}.notes__item-top-title{font-weight:500;font-size:16px;line-height:150%}.notes__item-top-date{font-weight:400;font-size:14px;line-height:143%;color:#cac4d0}.modal{background:#00000059;position:fixed;top:0;left:0;bottom:0;right:0;z-index:1000;display:flex;justify-content:center;align-items:center}.modal__block{background:linear-gradient(0deg,#6750a41c,#6750a41c),#fffbfe;border-radius:28px;max-width:312px;width:100%;padding:24px}.modal__block-title{font-weight:400;font-size:24px;line-height:133%}.modal__block-inputs{display:flex;flex-direction:column;gap:30px;margin:25px 0}.modal__block-inputs label{position:relative}.modal__block-inputs label input{width:100%;height:56%;border-radius:4px 4px 0 0;background:#e7e0ec;padding:23px 16px 9px;border-bottom:1px solid black}.modal__block-inputs label input:focus~span{top:-16px}.modal__block-inputs label span{transition:all .3s;color:#6750a4;font-size:12px;font-weight:400;line-height:16px;position:absolute;left:16px;top:8px}.modal__block-btns{display:flex;justify-content:flex-end;align-items:center;gap:18px}.modal__block-btn{padding:10px 12px;font-size:14px;font-weight:500;line-height:20px;text-transform:uppercase}.purple{color:#6750a4}.purple:hover{background:#e6ddff}.red{color:#cf1b1b}.red:hover{background:#ffe1e1}.add{position:fixed;bottom:30px;right:30px;width:56px;height:56px;display:flex;justify-content:center;align-items:center;border-radius:16px;box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;background:#6750a40d}