*{margin:0;padding:0;box-sizing:border-box}#root{font-family:Arial,Helvetica,sans-serif}body{background-color:#eaeaea}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}.page-title{font-size:2rem;color:gray}#search-input{width:25%;height:4rem;font-size:1.5rem;margin-top:30px;outline:none;border-radius:30px;padding:20px}#note{margin-top:30px;width:90%;height:7rem;font-size:1.5rem;border-bottom:none;outline:none;resize:none;padding:20px}#bottom{display:flex;align-items:center;justify-content:space-between;background-color:#fff;width:90%;border-left:1px solid black;border-right:1px solid black;border-bottom:1px solid black;padding:20px}.colors{display:flex;align-items:center;justify-content:center;gap:20px}.color{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;outline:none;border:none}.success-btn{width:120px;height:40px;background-color:#44c767;color:#fff;outline:none;border:none;border-radius:30px;font-weight:700;font-size:1.5rem;cursor:pointer}.active{display:flex;align-items:center;justify-content:center}.notes-area{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:90%;margin-top:30px;height:auto}.single-note{display:flex;align-items:center;justify-content:center;font-size:1.5rem;height:100px;max-width:100%;overflow:hidden}@media(max-width:1024px){.notes-area{grid-template-columns:repeat(2,1fr)}#search-input{font-size:1.3rem;height:3.5rem}#note{font-size:1.3rem;height:6rem}.success-btn{width:150px}}@media(max-width:768px){.app-container{padding:20px}.page-title{font-size:1.7rem}.notes-area{grid-template-columns:1fr}#bottom{flex-direction:column;gap:20px}.colors{gap:15px}.success-btn{width:150px;font-size:1.3rem}#search-input{height:3rem;font-size:1.2rem;width:50%}#note{height:5.5rem;font-size:1.2rem}}@media(max-width:480px){.page-title{font-size:1.5rem}.search-input{width:90%}.color{width:32px;height:32px}.single-note{font-size:1.2rem;height:auto;padding:15px;text-align:center}.success-btn{width:100px}.colors{display:flex;align-items:center;justify-content:center;gap:5px}}