@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none;box-sizing:border-box}:root{--color-bg-dark: #3a3a3a;--color-bg-black: #111111;--color-white: #fefefe;--color-primary: #7634d8;--color-danger: rgb(249, 84, 84)}body{font-family:Montserrat,sans-serif;display:grid;place-items:center;color:var(--color-white);background:#ccc;line-height:1.5}.fit__container{display:flex;flex-direction:column;overflow-y:scroll;height:100%}.fit__item{flex:1 1 auto;overflow-y:scroll}.fit__content-size{flex:0 1 auto}[contenteditable=true]:empty:not(:focus):before{content:attr(placeholder);color:gray}.btn{background:var(--color-bg-dark);border-radius:.8rem;padding:.8rem;font-size:1.6rem;color:var(--color-white);box-shadow:0 1rem 1rem #0003;transition:all .3s ease;display:flex;justify-content:center;align-items:center}.btn.lg{padding:.8rem 1.5rem;font-size:1.2rem;box-shadow:0 1rem 1.5rem #0006}.btn.danger{background:var(--color-danger)}.btn.primary{background:var(--color-primary)}.btn:hover{cursor:pointer;box-shadow:none}#app{background:var(--color-bg-black);height:100vh;max-width:48rem;width:100vw;padding:2rem 1.6rem;overflow-y:scroll;position:relative}::-webkit-scrollbar{display:none}h2,h4{font-weight:500}h2{font-size:2rem}.notes__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.5rem;background:var(--color-bg-black);z-index:9}.notes__header input{padding:.7rem 1rem;background:transparent;border:1px solid var(--color-bg-dark);border-radius:.6rem;color:var(--color-white);font-size:1.1rem;width:100%;margin-right:1.5rem}.notes__container{--col: 4;display:flex;flex-flow:column wrap;align-content:flex-start}.notes__list{display:flex;flex-direction:column;gap:1rem;width:calc(50% - .5rem);height:fit-content}.empty__notes{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.note__wrapper{padding:.5rem;width:calc(100% / var(--col))}.note{background:var(--color-primary);padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;cursor:pointer;transition:all .3s ease;color:var(--color-white);-webkit-user-select:none;user-select:none}.note__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;word-break:break-word;margin-bottom:.2rem;border-bottom:1px solid white;padding-left:.4rem}.note__details{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;padding-left:.4rem;word-break:break-word;font-size:.9rem;font-weight:400}.note:hover{opacity:.9}.note__date{font-size:.8rem;opacity:.85;padding-left:.4rem;text-align:right}.btn.add__btn{position:absolute;bottom:1.6rem;right:1.6rem;padding:1rem}.create-note__header{display:flex;justify-content:space-between;align-items:center}.create-note__form{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.create-note__form input,.create-note__form textarea{width:100%;padding:.5rem 1rem;background:transparent;border-radius:.2rem;font-size:1.1rem;color:var(--color-white)}.create-note__form input{font-size:2rem}@media screen and (max-width: 600px){#app{padding:2rem 1rem}.notes__container{--col: 2}.btn.add__btn{padding:.8rem;bottom:6%;right:1rem}}