:root{--background: #F9F5EB;--primary: #002B5B;--secondary: #EA5455;--tertiary: #d0b162}*{padding:0;margin:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--background);color:var(--primary)}input,textarea{padding:12px;margin:12px 0;font-family:Inter,sans-serif;background-color:transparent;color:var(--primary);border:1px solid var(--tertiary);border-radius:20px}input::placeholder,textarea::placeholder{color:var(--primary);font-weight:700}.note-app__header{color:var(--background);background-color:#002b5c99;position:sticky;top:10px;display:flex;align-items:center;justify-content:space-between;padding:4px 16px;margin:10px 16px;border-radius:99999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.note-app__header h1{margin:8px 0}.note-app__header p{font-weight:600}.note-app__body{max-width:1000px;margin:16px auto;padding:12px}.note-app__body h2{color:var(--primary);font-weight:600;margin:16px 0}.note-input{max-width:500px;margin:0 auto 48px}.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:var(--secondary)}.note-input__body{min-height:175px}.note-input button{display:block;width:100%;padding:8px;background-color:transparent;font-family:Inter,sans-serif;color:var(--primary);border:1px solid var(--tertiary);border-radius:4px;font-weight:700;cursor:pointer}.note-input button:hover{border:2px solid var(--primary)}.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:var(--secondary)}.note-item{border:1px solid var(--primary);border-radius:20px;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:var(--secondary)}.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 var(--primary);padding:8px 0;font-family:Inter,sans-serif;font-weight:700;cursor:pointer}.note-item__delete-button{border-right:1px solid var(--primary);color:var(--secondary)}.note-item__archive-button{color:var(--tertiary)}.note-item__archive-button:hover,.note-item__delete-button:hover{color:var(--primary)}.input_search{border-color:var(--background);color:var(--background)}.input_search::placeholder{color:var(--background)}.note-app__footer{display:flex;flex-direction:column;padding:20px;align-items:center;justify-items:center;gap:20px}.note-app__footer_contact{display:flex;gap:20px}.note-app__footer_contact a svg{color:var(--primary)}@media only screen and (max-width: 800px){.note-app__header{padding:0 16px;margin:0 12px}.note-app__header h1{font-size:20px}.note-app__header input{width:40vw}}@media only screen and (min-width: 400px){.notes-list{grid-template-columns:1fr 1fr}}@media only screen and (min-width: 700px){.notes-list{grid-template-columns:repeat(3,1fr)}.input_search input{min-width:400px}}@media only screen and (min-width: 1000px){.notes-list{grid-template-columns:repeat(4,1fr)}}