*{padding:0;margin:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:#f5f5f5}.note-app{max-width:800px;margin:0 auto;padding:16px}.note-app h1{font-weight:400;font-size:48px;margin-bottom:32px}.note-item{display:flex;align-items:center;margin:24px 0;border:1px dashed black;padding:16px;border-radius:8px}.note-item__image img{width:64px;border-radius:50%}.note-item__body{margin-left:8px;padding-left:8px;border-left:1px solid #aaa;flex:1}.note-item__title{padding:4px 0}.note-item__body{font-weight:lighter;padding-bottom:40px}.note-item__delete{display:block;padding:8px;font-size:18px;background-color:#ff4500;color:#fff;border:0;border-radius:4px;cursor:pointer}.note-item__archive{display:block;padding:8px;font-size:18px;background-color:#aaa;border-color:#ff4500;color:#ff4500;border:0;border-radius:4px;cursor:pointer}.note-item__unarchive{display:block;padding:8px;font-size:18px;background-color:maroon;border-color:#ff4500;color:#fff;border:0;border-radius:4px;cursor:pointer}.note-form{border:1px dashed black;background-color:bisque;padding:16px;margin:14px 0 32px;border-radius:8px}.note-item{display:grid;border:1px dashed black;background-color:bisque;padding:16px;margin:14px 0 32px;border-radius:8px}.note-form input{display:block;width:100%;padding:8px;margin:8px 0;font-family:Inter,sans-serif}.note-form button{width:100%;padding:8px;font-family:Inter,sans-serif}.note-archive{border:2px dashed black;padding:16px;margin:14px 0 32px;border-radius:8px}.note-empty{border:2px dashed black;background-color:bisque;padding:16px;margin:14px 0 32px;border-radius:8px}.note-unarchived{border:2px dashed black;padding:16px;margin:14px 0 32px;border-radius:8px}.note-validation{color:red}