*{box-sizing:border-box;margin:0;padding:0}html{font-size:10px}body{font-family:Inter,sans-serif;font-size:1.6rem;font-weight:400;color:#303030}ul{list-style:none}input,textarea{border:none;outline:none;background-color:#f6f6f6;color:#898989;border-radius:.7rem;-webkit-border-radius:.7rem;-moz-border-radius:.7rem;-ms-border-radius:.7rem;-o-border-radius:.7rem}input[type=search]{background-color:#fff}button{border:none;outline:none;background-color:#ec7160;color:#fff;cursor:pointer;padding:1.25rem 2rem;font-size:1.3rem;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;margin-right:2.7rem}button:focus{transform:scale(1.25);-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25)}button:focus,button:hover{background-color:#ec7160cc}img{max-width:100%}.container{height:100vh;display:grid;grid-template-columns:25.8rem 32.2rem 1fr;grid-template-rows:auto 1fr}.container .checkboxes{display:none}.header{grid-column:1/2;grid-row:1/2;background-color:#f6f6f6;padding:2rem 2.4rem;transition:.5s linear;-webkit-transition:.5s linear;-moz-transition:.5s linear;-ms-transition:.5s linear;-o-transition:.5s linear}.header__control{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:2.1rem 0}.header__icon{width:2rem;height:2rem;cursor:pointer;display:none}.header__logo{font-family:Aclonica,sans-serif;font-size:1.5rem;color:#ec7160}.header__search{position:relative;margin-top:3.7rem}.header__search--bar{width:100%;padding:1rem 0 1rem 3.4rem}.header__search--icon{position:absolute;top:50%;left:.8rem;width:1.8rem;height:1.8rem;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%)}.nav{grid-column:1/2;grid-row:2/3;background-color:#f6f6f6;padding:2rem 2.4rem 10rem;display:flex;flex-direction:column;justify-content:space-between;transition:.5s linear;-webkit-transition:.5s linear;-moz-transition:.5s linear;-ms-transition:.5s linear;-o-transition:.5s linear;width:100%}.nav .close__nav{margin-bottom:4.2rem;cursor:pointer;font-size:2.6rem;display:none}.nav__navigators--navigator{padding:.3rem 0 .3rem 1.2rem;margin-bottom:1rem;position:relative;cursor:pointer}.nav__navigators--active:before{content:"";display:block;width:.3rem;height:100%;background-color:#ec7160;position:absolute;top:0;left:0}.nav__clear--allNotes{font-size:1.3rem;color:#ec7160;cursor:pointer}.nav__clear--allNotes:hover{font-size:1.6rem;text-decoration:underline}.notes__browser{grid-column:2/3;grid-row:1/3;padding:3.8rem 2.8rem;position:relative;transition:.5s linear;-webkit-transition:.5s linear;-moz-transition:.5s linear;-ms-transition:.5s linear;-o-transition:.5s linear;overflow-y:auto;overflow-x:hidden;scrollbar-color:#ec7160 #f6f6f6;scrollbar-width:thin;direction:rtl}.notes__browser *{direction:ltr}.notes__browser--label{font-size:1.3rem;color:#ec7160;padding:1rem 0}.notes__browser--labelWithBorder{position:relative}.notes__browser--labelWithBorder:before,.notes__browser--labelWithBorder:after{content:"";display:block;width:calc(100% + 5.6rem);height:1px;background-color:#e7e7e9;position:absolute;left:-2.8rem}.notes__browser--labelWithBorder:before{top:0}.notes__browser--labelWithBorder:after{bottom:0}.notes__note{margin:3.1rem 0;cursor:pointer;position:relative}.notes__note--title{font-size:1.6rem;font-weight:400;margin-bottom:.8rem;display:flex;justify-content:space-between;align-items:center}.notes__note--snippet{font-size:1.3rem;color:#898989;margin:1rem 0 1.6rem}.notes__note--active:before,.notes__note:hover:before{content:"";display:block;width:calc(100% + 3.2rem);height:calc(100% + 3.2rem);background-color:#f6f6f6;border-radius:.8rem;-webkit-border-radius:.8rem;-moz-border-radius:.8rem;-ms-border-radius:.8rem;-o-border-radius:.8rem;position:absolute;top:-1.6rem;left:-1.6rem;z-index:-1}.pin__icon{cursor:pointer}.pin__icon:hover{transform:scale(1.5);-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5)}.notes__bottom{display:flex;justify-content:space-between;align-items:center;font-size:1.3rem;color:#898989}.notes__note--deleteButton{cursor:pointer;color:#ec7160}.notes__note--deleteButton:hover{animation:shake .3s forwards;-webkit-animation:shake .3s forwards}.empty__list{margin:2rem 0}.container:has(.notes__add--pop) .notes__browser{display:none}@keyframes shake{0%{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg)}25%{transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);-o-transform:rotate(-10deg)}50%{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg)}75%{transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);-o-transform:rotate(10deg)}to{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg)}}.singleNote__preview{grid-column:3/4;grid-row:1/3;padding:11.4rem 10rem 2rem;position:relative;z-index:1000;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.singleNote__preview::-webkit-scrollbar{display:none}.singleNote__preview--title{font-size:2.6rem;font-weight:400;margin-bottom:3.9rem}.singleNote__preview--published{font-size:1.3rem;font-weight:400;color:#898989;margin-top:.5rem}.singleNote__preview--paragraph{line-height:1.5;margin-bottom:1rem}.singleNote__preview--addButton{width:6rem;height:6rem;font-size:4rem;padding:0;position:fixed;bottom:3rem;right:3rem;display:flex;align-items:center;justify-content:center;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;box-shadow:0 .9rem 2.5rem #ec7160}.singleNote__preview .singleNote__preview--custome{color:#ec7160}.singleNote__preview:before{content:"";display:block;width:.1rem;height:100%;background-color:#e7e7e9;position:absolute;top:0;left:1.5rem}.singleNote__preview .notes__browser--toggler{width:2.8rem;height:2.8rem;position:absolute;cursor:pointer;top:12.9rem;left:1.5rem;border:1px solid #e7e7e9;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;background-color:#fff;transform:translate(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);z-index:20000}.singleNote__preview--angleRight{display:none}.container:has(.notes__add--pop) .singleNote__preview{display:none}.notes__add--form{display:none;grid-column:2/4;grid-row:1/3;padding:11.4rem 20rem 2rem}.notes__add--form.notes__add--pop{display:block}.notes__add--formTitle{font-size:2.6rem;font-weight:400;margin-bottom:3.6rem}.notes__add--formInputContainer{margin-bottom:3.9rem}.notes__add--formInputContainer .error{color:#ec7160;font-size:1.3rem;margin-top:.4rem;display:none}.notes__add--formInputContainer .error__show{display:block}.notes__add--form label{font-size:1.3rem;color:#898989;margin-bottom:.8rem}.notes__add--form input,.notes__add--form textarea{display:block;width:100%;color:#898989;padding:1.5rem;margin-top:.6rem}@media(max-width:1200px){.singleNote__preview,.notes__add--form{padding-left:3rem;padding-right:3rem}}@media(min-width:768px)and (max-width:1024px){.container{grid-template-columns:15rem 25rem 1fr}.header,.nav{padding-left:1.2rem;padding-right:1.2rem}.singleNote__preview{padding-left:3rem;padding-right:3rem}}@media(max-width:767px){.container{overflow:hidden;grid-template-columns:.1rem 1fr;grid-template-rows:auto 1fr}.notes__browser,.singleNote__preview,.singleNote__preview:before,.notes__add--form{display:none}.header{grid-column:2/3;grid-row:1/2;background-color:transparent}.header__icon{display:block}.header__search{display:none}.nav{grid-column:1/2;grid-row:1/3;display:none}.notes__browser--toggler{display:none}.container:has(.toggle__nav--checkbox:checked){grid-template-columns:25.8rem 1fr}.container:has(.toggle__nav--checkbox:checked) .nav{display:flex}.container:has(.toggle__nav--checkbox:checked) .close__nav{display:block}.container:has(.toggle__search--checkbox:checked) .header{background-color:#f6f6f6}.container:has(.toggle__search--checkbox:checked) .header__search{display:block}.container:has(.checkboxes__notes:checked) .notes__browser{grid-column:2/3;grid-row:2/3;border:none;display:block;padding:3.5rem 2rem 2rem;scrollbar-width:none;-ms-overflow-style:none}.container:has(.checkboxes__notes:checked) .notes__browser::-webkit-scrollbar{display:none}.container:has(.checkboxes__notes:checked) .singleNote__preview,.container:has(.checkboxes__notes:checked) .notes__add--form{display:none}.container:has(.checkboxes__preview:checked) .singleNote__preview{grid-column:2/3;grid-row:2/3;display:block;padding:3.5rem 2rem 2rem}.container:has(.checkboxes__preview:checked) .notes__browser,.container:has(.checkboxes__preview:checked) .notes__add--form,.container:has(.checkboxes__preview:checked) .nav__navigators--active:before{display:none}.container:has(.checkboxes__addForm:checked) .notes__add--form{grid-column:2/3;grid-row:2/3;display:block;padding:3.5rem 2rem 2rem}.container:has(.checkboxes__addForm:checked) .notes__browser,.container:has(.checkboxes__addForm:checked) .singleNote__preview{display:none}button{margin-right:1.5rem}}@media(min-width:768px){.container:has(.toggle__browser--checkbox:checked){grid-template-columns:25.8rem .1rem 1fr}.container:has(.toggle__browser--checkbox:checked) .notes__browser{padding:0}.container:has(.toggle__browser--checkbox:checked) .notes__browser *{display:none}.container:has(.toggle__browser--checkbox:checked) .singleNote__preview--angleLeft{display:none}.container:has(.toggle__browser--checkbox:checked) .singleNote__preview--angleRight{display:block}.container:has(.toggle__browser--checkbox:checked) .singleNote__preview{padding-left:5rem;padding-right:5rem}}