*{padding:0;margin:0;box-sizing:border-box}body{font-family:Quicksand,sans-serif;background-color:#202124;color:#fff}input,textarea{padding:12px;margin:12px 0;font-family:Inter,sans-serif;background-color:transparent;color:#000;border:1px solid #aaa;border-radius:4px}input::placeholder,textarea::placeholder{color:#aaa;font-weight:700}textarea{resize:vertical}.note-app__header{display:flex;align-items:center;justify-content:center;padding:4px 16px;border-bottom:1px solid #aaa;background-color:#000;position:fixed;top:0;width:100%}.note-app__header h1{margin:8px 0;flex:1;color:#fff}.note-app__body{max-width:1000px;margin:70px auto 16px;padding:12px}.note-app__body h2{font-weight:400;margin:16px 0}.note-input{margin:0 auto 48px;max-width:500px}.note-input input,.note-input textarea{display:block;width:100%}.note-input__title{font-weight:700}.note-input__title__char-limit{font-size:14px;text-align:right;color:#aaa}.note-input__body{min-height:175px}.note-input button{display:block;width:100%;padding:8px;background-color:transparent;font-family:Inter,sans-serif;color:#fff;border:1px solid #aaa;border-radius:4px;font-weight:700;cursor:pointer}.notes-list{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(min-content,max-content);gap:16px;margin-bottom:48px}.notes-list__empty-message{text-align:center;color:#aaa}.note-item{border:1px solid #aaa;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}.note-item__content{padding:12px;flex:1}.note-item__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-bottom:4px}.note-item__date{font-size:12px;margin-bottom:8px;color:#aaa}.note-item__body{font-size:14px}.note-item__action{display:flex}.note-item__delete-button,.note-item__archive-button{display:block;width:100%;background-color:transparent;border:0;border-top:1px solid #aaa;padding:8px 0;font-family:Inter,sans-serif;font-weight:700;cursor:pointer}.note-item__delete-button{border-right:1px solid #aaa;color:#ff5f52}.note-item__archive-button{color:#fff263}.note-item__archive-button:hover{color:#c49000}.note-item__delete-button:hover{color:#b00020}.add-note-btn{width:60px;height:60px;border-radius:50%;font-size:2rem;border:1px solid black;cursor:pointer;position:fixed;bottom:20px;right:20px}.input-modal{display:flex;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000c;justify-content:center;align-items:center}.note-input-modal{margin:0 auto;width:50%;max-width:500px;background-color:#fff;border-radius:10px;padding:10px 20px 20px}.note-input-modal h2{color:#000}.note-input-modal input,.note-input-modal textarea{display:block;width:100%}.note-input-modal__title{font-weight:700}.note-input-modal__title__char-limit{font-size:14px;text-align:right;color:#000}.note-input-modal__body{min-height:175px}.note-input-modal button{display:block;width:100%;padding:8px;background-color:transparent;font-family:Inter,sans-serif;color:#000;border:1px solid #aaa;border-radius:4px;font-weight:700;cursor:pointer}.close-input-modal{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}@media only screen and (min-width: 500px){.notes-list{grid-template-columns:1fr 1fr}}@media only screen and (max-width: 1000px){.note-input-modal{width:80%}}@media only screen and (min-width: 800px){.notes-list{grid-template-columns:repeat(3,1fr)}.note-search input{min-width:400px}}@media only screen and (min-width: 800px){.notes-list{grid-template-columns:repeat(4,1fr)}}