@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap);body{overflow-y:auto;background-color:#f0e68c;padding:20px;display:flex;flex-direction:column;align-items:center}.header{width:100%;max-width:900px;display:flex;align-items:center;margin-bottom:20px;padding:0 10px;gap:15px}#toolbar label{font-family:'Caveat',cursive;font-size:1.5em;color:#4b4b4b}#toolbar input[type=color]{background-color:#fff}h1{font-family:'Caveat',cursive;font-size:3em;color:#4b4b4b;text-shadow:2px 2px #ccc;margin:0;margin-right:auto}#addNoteBtn,#showArchivedBtn{background-color:#3e8e41;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:1em;box-shadow:2px 2px 5px rgba(0,0,0,.2);transition:background-color .3s}#addNoteBtn:hover,#showArchivedBtn:hover{background-color:#4caf50}.note-container,.archived-notes-container .note-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:100%;max-width:900px}.archived-notes-container{width:100%;max-width:900px;margin-top:20px;border-top:2px solid #ccc;padding-top:20px}.note{background-color:#ffffa5;padding:15px;box-shadow:5px 5px 10px rgba(0,0,0,.3);border-top:30px solid #f0e68c;transform:rotate(2deg);transition:transform .2s,box-shadow .2s;width:250px;min-height:200px;position:relative;display:flex;flex-direction:column}.note:nth-child(even){transform:rotate(-2deg)}.note:hover{transform:scale(1.05) rotate(0deg);box-shadow:8px 8px 15px rgba(0,0,0,.4);z-index:10}.note-content{background-color:transparent;border:none;width:100%;height:100%;resize:none;font-size:1.2em;font-family:'Caveat',cursive;outline:none}.delete-btn,.archive-btn{background-color:#ff4c4c;color:#fff;border:none;border-radius:50%;width:25px;height:25px;font-weight:700;cursor:pointer;position:absolute;box-shadow:2px 2px 5px rgba(0,0,0,.3);transition:background-color .3s;display:none}.delete-btn{top:-12px;right:-12px}.archive-btn{top:-12px;right:20px;background-color:#4CAF50}.note:hover .delete-btn,.note:hover .archive-btn{display:block}.delete-btn:hover{background-color:#c00}.archive-btn:hover{background-color:#3e8e41}.blue-background-class{background-color:rgba(0,115,255,.2)}