.modal__btn{padding:12px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;color:#6750a4;display:flex;align-items:center;gap:8px;transition:.5s;border-radius:5px}.modal__btn:hover{background:#e6ddff}.modal__btn.red{color:#cf1b1b}.modal__btn.red:hover{background:#ffe1e1}.modal{background:#00000059;position:fixed;width:100%;height:100%;top:0;left:0;display:flex;justify-content:center;align-items:center;transition:.5s}.modal.hide{visibility:hidden;opacity:0;transform:scale(1.5)}.modal__form{background:#eee8f4;padding:24px;border-radius:28px;max-width:312px;width:100%}.modal__title{font-weight:400;font-size:24px;line-height:133%;margin-bottom:16px}.modal__content{display:flex;flex-direction:column;gap:16px;max-width:264px;width:100%}.modal__content label{border-radius:4px 4px 0 0;background:#e7e0ec;display:flex;flex-direction:column;padding:8px 16px;border-bottom:1px solid #1c1b1f}.modal__content input,.modal__content textarea{line-height:150%;letter-spacing:.03em;color:#49454f;resize:none}.modal__content span{font-size:12px;line-height:133%;letter-spacing:.03em;color:#6750a4}.modal__controls{display:flex;margin-top:24px;justify-content:end;font-size:14px;gap:8px}.header{box-shadow:0 1px 3px #0000004d,0 4px 4px #00000040;background:#f3edf7;padding:17px 19px;position:relative;height:70px;overflow:hidden}.header__content,.header__form{display:flex;align-items:center;justify-content:space-between;top:17px;bottom:17px;right:19px;left:19px;transition:.5s}.header__content.hide{position:absolute;transform:translateY(-200%)}.header__form.hide{position:absolute;transform:translateY(200%)}.header__title{font-weight:400;font-size:22px;line-height:127%;text-align:center}.header__lang{text-transform:uppercase;font-size:20px;font-weight:700}.header__input{line-height:125%;cursor:text}.header__input::placeholder{color:#9d9d9d}.notes__top{display:flex;justify-content:space-between;align-items:center;margin-top:30px}.notes__title{font-weight:400;font-size:22px;line-height:127%;color:#323232}.notes__btn{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;background:#eee8f4;padding:18px 20px;border-radius:16px;display:flex;align-items:center;gap:15px;font-weight:500;font-size:14px;line-height:143%;letter-spacing:.01em;color:#6750a4}.card{box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d;background:#f7f2f9;border-radius:16px;padding:16px;font-size:14px;line-height:143%;letter-spacing:.02em}.card__title{font-weight:500;font-size:16px;line-height:150%;letter-spacing:.01em}.card__date{color:#cac4d0}.card__desc{color:#49454f;margin:16px 0}.card__btn{padding:12px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;color:#6750a4;display:flex;align-items:center;gap:8px;transition:.5s;border-radius:5px}.card__btn:hover{background:#e6ddff}.card__btn.red{color:#cf1b1b}.card__btn.red:hover{background:#ffe1e1}.card__controls{display:flex;justify-content:flex-end}.notes__list{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.notes__list.active{grid-template-columns:repeat(1,1fr)}.card__content{display:flex;justify-content:space-between;align-items:center}.add-btn{box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;background:#eee8f4;padding:19px;border-radius:16px;position:fixed;bottom:30px;right:30px}@font-face{font-family:Roboto;src:url(/todo-list/assets/Roboto-VariableFont-WOy3sDCz.ttf)}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:inherit}ul{list-style:none}body{color:#1c1b1f;font-family:Roboto}.container{max-width:1152px;width:100%;padding:0 12px;margin:0 auto}button,input,textarea{border:none;outline:none;color:inherit;background:inherit;font-family:inherit;font-size:inherit;cursor:pointer}