*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}body{margin:0;min-height:100vh;background-color:#f0f8ff}ul{list-style:none}.notes-page{padding:40px;display:flex;flex-direction:column;align-items:center}.note-list{width:70%;min-width:450px;padding:30px;display:flex;flex-direction:column;align-items:center;gap:20px}.header{background-color:#bae2fd;color:#0277c7;padding:1rem;text-align:center}.note-card{width:100%;max-width:400px;background-color:#f0f8ff;border:3px solid #7dcbfc;padding:1rem;display:flex;align-items:center;justify-content:space-between;transition:all .2s ease;gap:10px}.note-card.marked{background-color:#bdf6bc;border:3px solid #4ddb4e}.card-title{flex-grow:1;background-color:transparent;border:none;font-size:1.2rem;font-weight:100;outline:none;min-width:0}.div-buttons{display:flex;gap:10px;flex-shrink:0}.div-buttons button{width:35px;height:35px;background-color:transparent;border:none;font-size:1.2rem;cursor:pointer;color:#333;display:flex;justify-content:center;align-items:center;transition:color .3s ease,transform .2s ease}.div-buttons button:hover{color:#4ddb4e;transform:scale(1.1)}.div-buttons button:active{transform:scale(.95)}@media (max-width: 360px){.note-card{padding:.8rem;gap:5px}.card-title{font-size:1rem}.div-buttons button{width:30px;height:30px;font-size:1rem}}.note-form{width:100%;max-width:400px;background-color:#90ee90;border:3px solid #25c226;padding:15px 20px;margin-bottom:20px;display:flex;align-items:center;gap:10px;transition:all .2s}.note-title{flex-grow:1;background-color:transparent;border:none;font-size:1.2rem;font-weight:700;outline:none;min-width:0}.create-btn{width:40px;height:40px;font-size:1.5rem;background-color:#19a01a;color:#fff;display:flex;justify-content:center;align-items:center;border:none;cursor:pointer;flex-shrink:0}.create-btn:hover{background-color:#177e19}.create-btn:active{background-color:#146514}@media (max-width: 360px){.note-form{padding:10px;gap:5px}.note-title{font-size:1rem}.create-btn{width:35px;height:35px;font-size:1.2rem}}