@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--body-color: #f3f4f6;--color-text-100: #cbd5e1;--color-text-200: #94a3b8;--color-text-300: #374151;--color-primary-100: #e6d6f2;--color-primary-200: #b3a4d5;--color-primary-300: #6f4c93;--color-primary-400: #3d1a6d;--color-white: #fff;--color-trash: #d33737;--primary-font: "Roboto", sans-serif;--normal-font-size: 1.4rem}@media screen and (min-width: 640px){:root{--normal-font-size: 1.6rem}}*,:before,:after{box-sizing:border-box;padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}body,input,button{font-family:var(--primary-font);font-size:var(--normal-font-size)}select{font-family:var(--primary-font)}body{background-color:var(--body-color);min-height:100dvh}input,button{border:none;outline:none}input{display:block;caret-color:var(--color-primary-300);accent-color:var(--color-primary-400)}button{cursor:pointer;background:none}ul{list-style:none}a{text-decoration:none}p{text-align:left}img{display:block;max-width:100%;height:auto}select{width:11rem;padding:.5rem;outline:none;border:2px solid var(--color-primary-300);border-radius:1rem;font-size:1.2rem;font-weight:700;color:var(--color-text-300)}#root{max-width:1280px;margin:0 auto;padding-inline:1.6rem}.note__text-field{width:100%;padding:1rem;border-radius:1rem;font-size:var(--normal-font-size);color:var(--color-text-300);border:2px solid var(--color-text-100);transition:border .3s}.note__text-field:focus{border:2px solid var(--color-primary-300);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.btn{font-size:var(--normal-font-size);padding:1rem;border-radius:1rem}.btn--primary{color:#fff;background-color:var(--color-primary-400);border:2px solid var(--color-primary-400);transition:all .2s}.btn--primary:hover{border:2px solid var(--color-primary-200)}.note__header{width:100%;height:6rem;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:space-between;background-color:var(--color-primary-100);border-bottom-left-radius:1.6rem;border-bottom-right-radius:1.6rem;padding-inline:1.6rem}.note__info{display:flex;align-items:center;column-gap:.5rem}.note__info--name{font-size:1.6rem;font-weight:700;color:var(--color-text-300)}.note__counter{width:2rem;height:2rem;font-size:var(--normal-font-size);display:flex;justify-content:center;align-items:center;border-radius:.5rem;background-color:var(--color-primary-400);color:var(--color-white)}.note{overflow-x:hidden}.note__body{display:flex;flex-direction:column;gap:2rem;padding-top:8rem}.note__form{display:grid;gap:1.6rem}.note__message{font-size:1.8rem;color:var(--color-text-300)}.note__status{display:flex;justify-content:space-between;color:var(--color-text-200);margin-bottom:2rem}.note__status--info{display:flex;align-items:center;column-gap:.5rem}.note__list{display:flex;flex-direction:column;row-gap:1.6rem;margin-bottom:2rem}.note__item{padding:1.4rem;margin-bottom:.5rem;background-color:var(--color-white);border-radius:1rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.note__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:2px solid var(--color-text-100)}.note__title{color:var(--color-text-300);margin-bottom:.5rem;font-weight:700}.note__item.completed .note__title{text-decoration:line-through;text-decoration-color:var(--color-primary-300)}.note__description{font-weight:300;color:var(--color-text-200);margin-bottom:.5rem}.note__title,.note__description{white-space:normal;word-break:break-word;overflow-wrap:break-word}.note__actions{display:flex;align-items:center;gap:2rem}.note__trash--btn,.note__trash,.note__edit--btn,.note__edit,.note__complete{width:1.8rem;height:1.8rem}.note__trash{color:var(--color-trash)}.note__edit{color:var(--color-primary-400)}.note__item--footer{text-align:center;color:var(--color-text-200)}.modal__backdrop{width:100vw;height:100vh;position:fixed;inset:0;z-index:10;background-color:#3f454ccc}.modal{width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-white);padding:1.4rem;border-radius:1rem;box-shadow:0 2px 10px var(--color-text-300);z-index:100}.modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid var(--color-text-100)}.modal__title{font-weight:700}.modal__close{width:2rem;height:2rem;color:var(--color-trash)}.modal__body{display:flex;flex-direction:column;row-gap:2rem}.modal__question{white-space:normal;word-break:break-word;overflow-wrap:break-word}.modal__note-title{color:var(--color-primary-300)}.modal__edit-form{display:flex;flex-direction:column;row-gap:2rem}.modal__buttons{display:flex;justify-content:space-between;align-items:center}.btn--cancel,.btn--delete,.btn--edit{width:45%}.btn--cancel{color:var(--color-text-300);background-color:var(--color-text-100)}.btn--delete{color:var(--color-white);background-color:var(--color-trash)}.btn--edit{color:var(--color-white);background-color:var(--color-primary-400)}@media screen and (min-width: 640px){#root{padding-inline:2.4rem}.note__header{position:initial;padding-inline:2rem}.note__info--name,.note__message{font-size:2rem}select{width:14rem;font-size:1.4rem}.note__body{flex-direction:row;gap:3rem;padding-top:3rem}.note__data{width:40%}.note__form{gap:2rem}.note__container{width:60%}.note__item{padding:2rem}.note__description{font-size:1.4rem}.note__trash--btn,.note__trash,.note__edit--btn,.note__edit,.note__complete{width:2rem;height:2rem}.modal{max-width:55rem}.modal__close{width:2.2rem;height:2.2rem}.note__text-field,.btn{padding:1.4rem}}