*{margin:0;padding:0;font-family:Inter,"sans-serif";background-color:#181818}.App{padding:32px}.header{display:flex;justify-content:space-between;color:#fff;width:100%;max-width:1000px;margin:0 auto}.header .w-bolt{width:24px}.form-section{margin-top:32px}.form-section form,.search-section{display:flex;justify-content:center;flex-direction:column;max-width:550px;width:100%;margin:0 auto}#titleInput,#queryInput{border:1px solid #f5f5f5;height:45px;color:#f5f5f5;padding:0 10px}.title-limit{color:#f5f5f5;text-align:end}#bodyInput{border:1px solid #f5f5f5;margin-top:10px;padding:10px;color:#f5f5f5}.btnSubmit{border:1px solid #f5f5f5;margin-top:10px;height:45px;color:#f5f5f5;cursor:pointer}#queryInput{margin-top:32px}.note-section{width:100%;max-width:1000px;margin:32px auto 0;color:#f4f4f4}.title-note-section{font-weight:500}.notes{display:flex;flex-wrap:wrap;margin-top:8px;gap:12px}.card{display:flex;flex-direction:column;border:1px solid #f4f4f4;width:239px;position:relative;height:325px}.card .detail{padding:16px}.card .title-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card .date-note{color:#c4c4c4;font-size:13px;margin:5px 0}.card .body-note{height:200px;overflow-y:auto;overflow-wrap:break-word}.body-note p{margin-right:15px}.body-note::-webkit-scrollbar{width:2px}.body-note::-webkit-scrollbar-track{background:#f1f1f1}.body-note::-webkit-scrollbar-thumb{background:#888}.body-note::-webkit-scrollbar-thumb:hover{background:#555}.action-buttons{position:absolute;width:100%;background-color:#faebd7;bottom:0}.action-buttons button{border:1px solid #f5f5f5;height:45px;cursor:pointer;width:50%}.btn-delete-note{color:red}.btn-archive-note{color:#ffe600}.archive-notes{margin-top:32px}@media only screen and (max-width: 425px){.card{width:100%}}@media only screen and (max-width: 1024px){.notes{justify-content:center}}