@font-face{font-family:Roboto;src:url(/vue-todo-list/fonts/Roboto-Regular.d0bc87a8.ttf);font-weight:400}@font-face{font-family:Roboto;src:url(/vue-todo-list/fonts/Roboto-Medium.9204c2aa.ttf);font-weight:500}*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Roboto}a{text-decoration:none}ul{list-style:none}.container{max-width:1320px;width:100%;margin:0 auto;padding:0 15px}button{outline:none;border:none;cursor:pointer}.header{overflow:hidden;-webkit-box-shadow:0 4px 4px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.3);box-shadow:0 4px 4px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.3);background:#f3edf7;height:75px;padding:20px}.header__nav,.header__search{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__nav input,.header__search input{width:80%;border:none;outline:none;background:transparent;color:#9d9d9d;font-size:16px;line-height:20px}.header__nav-lang,.header__search-lang{text-transform:uppercase;font-size:24px}.header__nav-title,.header__search-title{font-weight:400;font-size:22px;line-height:28px;color:#1c1b1f}.notes{margin-top:50px}.notes__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.notes__top-title{font-size:22px;line-height:28px;color:#323232;font-weight:400}.notes__top-btn{background:-webkit-gradient(linear,left bottom,left top,from(rgba(103,80,164,.11)),to(rgba(103,80,164,.11))),#fffbfe;background:linear-gradient(0deg,rgba(103,80,164,.11),rgba(103,80,164,.11)),#fffbfe;-webkit-box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);border-radius:16px;width:120px;height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:15px}.notes__top-btn span{font-weight:500;font-size:14px;line-height:20px;color:#6750a4}.notes__list{margin-top:50px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.notes__list.active{grid-template-columns:1fr}.notes__item{background:-webkit-gradient(linear,left bottom,left top,from(rgba(103,80,164,.05)),to(rgba(103,80,164,.05))),#fffbfe;background:linear-gradient(0deg,rgba(103,80,164,.05),rgba(103,80,164,.05)),#fffbfe;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);border-radius:16px;padding:16px}.notes__item-top.between{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.notes__item-title{font-weight:500;font-size:16px;line-height:24px;letter-spacing:.1px;color:#1c1b1f}.notes__item-date{color:#cac4d0}.notes__item-date,.notes__item-text{font-size:14px;line-height:20px;letter-spacing:.25px}.notes__item-text{color:#49454f;margin:16px 0}.notes__item-btns{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.notes__item-btn,.notes__item-btns{display:-webkit-box;display:-ms-flexbox;display:flex}.notes__item-btn{border-radius:5px;padding:12px;background:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:11px}.notes__item-btn span{letter-spacing:.1px;text-transform:uppercase;font-weight:500;font-size:14px;line-height:20px}.edit{color:#6750a4;-webkit-transition:background .3s;transition:background .3s}.edit:hover{background:#e6ddff}.del{color:#cf1b1b;-webkit-transition:background .3s;transition:background .3s}.del:hover{background:#ffe1e1}.modal{background:rgba(0,0,0,.35);position:fixed;top:0;left:0;right:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:999}.modal__block{background:-webkit-gradient(linear,left bottom,left top,from(rgba(103,80,164,.11)),to(rgba(103,80,164,.11))),#fffbfe;background:linear-gradient(0deg,rgba(103,80,164,.11),rgba(103,80,164,.11)),#fffbfe;border-radius:28px;max-width:312px;width:100%;padding:24px}.modal__block-title{color:#1c1b1f;font-size:24px;line-height:32px;margin-bottom:16px;font-weight:400}.modal__block-inputs{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}.modal__block-inputs label{position:relative}.modal__block-inputs label span{position:absolute;top:8px;left:16px;color:#6750a4;font-size:12px;line-height:16px}.modal__block-inputs label input,.modal__block-inputs label textarea{width:100%;background:#e7e0ec;border-radius:4px 4px 0 0;border:none;outline:none;padding:23px 0 9px 16px;color:#49454f;font-size:16px;line-height:24px;resize:none;border-bottom:1px solid #000}.modal__block-btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;margin-top:24px}.modal__block-btn{font-weight:500;font-size:14px;line-height:20px;text-transform:uppercase;background:none;padding:10px 12px}.add__note{width:56px;height:56px;background:-webkit-gradient(linear,left bottom,left top,from(rgba(103,80,164,.11)),to(rgba(103,80,164,.11))),#fffbfe;background:linear-gradient(0deg,rgba(103,80,164,.11),rgba(103,80,164,.11)),#fffbfe;border-radius:16px;position:fixed;bottom:30px;right:30px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)}.modal-enter-active,.modal-leave-active{-webkit-transition:.2s ease;transition:.2s ease}.modal-enter-from,.modal-leave-to{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}.nav-enter-active,.nav-leave-active{-webkit-transition:.4s linear;transition:.4s linear}.nav-enter-from,.nav-leave-to{opacity:0;-webkit-transform:translateY(-200px);transform:translateY(-200px)}.search-enter-active,.search-leave-active{-webkit-transition:.6s linear;transition:.6s linear}.search-enter-from,.search-leave-to{opacity:0;-webkit-transform:translateY(200px);transform:translateY(200px)}