@font-face{font-family:Roboto;src:url(./Roboto-VariableFont-WOy3sDCz.ttf)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto;color:#1c1b1f}a{text-decoration:none;color:inherit}ul{list-style:none}.container{max-width:1152px;width:100%;padding:0 12px;margin:0 auto}button,input,textarea{color:inherit;font-family:inherit;font-size:inherit;border:none;outline:none;background:transparent;cursor:pointer;resize:none}.btn{font-weight:500;font-size:14px;line-height:143%;letter-spacing:.01em;text-transform:uppercase;color:#6750a4;display:flex;align-items:center;gap:8px;padding:12px;border-radius:5px;transition:.5s}.btn:hover{background:#e6ddff}.btn.red{color:#cf1b1b}.btn.red:hover{background:#ffe1e1}.modal{z-index:99;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000059;display:flex;justify-content:center;align-items:center;transition:.5s}.modal.hide{visibility:hidden;opacity:0}.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}.modal__content label{display:flex;flex-direction:column;background:#e7e0ec;border-radius:4px 4px 0 0;padding:8px 16px;border-bottom:1px solid #1c1b1f;max-width:264px;width:100%}.modal__content span{font-size:12px;line-height:133%;letter-spacing:.03em;color:#6750a4}.modal__content input,.modal__content textarea{font-size:16px;line-height:150%;letter-spacing:.03em;color:#49454f}.modal__controls{display:flex;margin-top:24px;justify-content:end}.header{box-shadow:0 1px 3px #0000004d,0 4px 4px #00000040;background:#f3edf7;position:relative;overflow:hidden}.header__content,.header__form{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;transition:.5s}.header__content.hide,.header__form.hide{position:absolute;width:100%;height:100%;top:0;left:0;transform:translateY(100%)}.header__lang{text-transform:uppercase;font-size:20px;font-weight:500}.header__title{font-weight:400;font-size:22px;line-height:127%;text-align:center}.header__input{line-height:125%}.header__input::placeholder{color:#9d9d9d}.notes{margin-top:30px}.notes__top{display:flex;justify-content:space-between;align-items:center}.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;border-radius:16px;padding:18px 20px;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}.card__title{font-weight:500;font-size:16px;line-height:150%;letter-spacing:.01em}.card__date{font-size:14px;line-height:143%;letter-spacing:.02em;color:#cac4d0}.card__desc{font-size:14px;line-height:143%;letter-spacing:.02em;color:#49454f;margin:17px 0}.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:1fr}.card__block{display:flex;justify-content:space-between;align-items:center}.add-btn{border-radius:16px;padding:19px;box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;width:max-content;background:#eee8f4;position:fixed;bottom:30px;right:30px;cursor:pointer}