.headerContainer{background:orange;width:100%;height:4rem;color:#fff;padding:1rem 2rem;box-shadow:1px 1px 5px 1px #3f3f3f;display:flex;justify-content:start;align-items:center}*{margin:0;padding:0;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;box-sizing:border-box}html,body{overflow-x:hidden;width:100%}.noteContainer{display:flex;flex-wrap:wrap;padding:1rem;gap:1rem;min-height:200px}.note-draggable{-webkit-user-select:none;user-select:none;margin:.5rem}.content{background:#fff;box-shadow:1px 1px 2px 2px gray;padding:2rem;border-radius:10px;border:none;margin:1rem;display:inline-block;position:relative}.delete-button{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.delete-button:hover{background-color:#ff00001a;color:red}.delete-button span{display:block;line-height:1}.footerContainer{display:flex;justify-content:center;align-items:center;box-shadow:0 -1px 2px #0000001a;height:3rem;color:gray;background-color:#fff;position:fixed;bottom:0;width:100%}.create-area-container{display:flex;justify-content:center;padding:2rem;width:100%;margin-bottom:4rem}.area-container{background:#fff;box-shadow:1px 1px 2px 2px gray;border-radius:10px;padding:1.5rem;width:95rem;min-height:150px;position:relative;max-width:90%}.area-container textarea{width:100%;border:none;padding:.5rem;font-size:1rem;resize:none;outline:none}.area-container input{width:100%;border:none;padding:.5rem;font-size:1.2rem;font-weight:700;outline:none}.area-container button{position:absolute;bottom:1rem;left:1rem;background:orange;color:#fff;border:none;border-radius:50%;width:36px;height:36px;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000004d;transition:all .2s ease}.area-container button:hover{background:#ff9100;transform:scale(1.1)}.noteContainer{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:1.5rem;padding:2rem;margin-bottom:4rem;min-height:200px}.note-draggable{margin:0;padding:0;transform-origin:center;transition:transform .2s ease}.content{cursor:grab;transition:box-shadow .2s ease}.content.dragging{box-shadow:0 5px 15px #0003;cursor:grabbing}.content{transition:transform .2s ease,box-shadow .2s ease}.content:hover{transform:translateY(-2px);box-shadow:2px 2px 4px 2px #8080804d;cursor:grab}.content:active{cursor:grabbing}.content{background:#fff;box-shadow:1px 1px 2px 2px gray;padding:2rem;border-radius:10px;border:none;min-width:240px;max-width:300px}