body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#fff1f6}.container{width:450px;height:550px;border-radius:30px;background-color:#d7aefb;padding:30px 50px;box-shadow:-10px -10px 15px hsla(0,0%,100%,.8),10px 10px 15px rgba(0,0,0,.2),inset -5px -5px 10px hsla(0,0%,100%,.8),inset 5px 5px 10px rgba(0,0,0,.2)}.text-input{border-radius:5px;outline:none}.btn,.text-input{padding:7px 15px;box-shadow:5px 5px 10px rgba(0,0,0,.2),-5px -5px 10px hsla(0,0%,100%,.1),inset 2px 2px 4px rgba(0,0,0,.1),inset -2px -2px 4px hsla(0,0%,100%,.2)}.btn{display:inline-block;border:none;border-radius:5px;background:linear-gradient(135deg,#6a44d1,#8954a8);color:#fff;font-size:16px;margin-left:17px;font-weight:700;cursor:pointer;transition:background .3s ease}.btn:hover{background:linear-gradient(135deg,#8954a8,#6a44d1)}.note{background-color:#e077ff;color:#181818;width:250px;padding:7px 15px;border-radius:5px;box-shadow:5px 5px 10px rgba(0,0,0,.2),-5px -5px 10px hsla(0,0%,100%,.1),inset 2px 2px 4px rgba(0,0,0,.1),inset -2px -2px 4px hsla(0,0%,100%,.2)}.notes ul{list-style:none;padding:0}.notes li{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.note{flex:1;margin-right:10px}button{background:linear-gradient(135deg,#6a44d1,#8954a8);color:#fff;border:none;padding:8px 12px;border-radius:5px;cursor:pointer;transition:background .3s ease;box-shadow:5px 5px 10px rgba(0,0,0,.2),-5px -5px 10px hsla(0,0%,100%,.1),inset 2px 2px 4px rgba(0,0,0,.1),inset -2px -2px 4px hsla(0,0%,100%,.2)}button:hover{background:linear-gradient(135deg,#764ba2,#667eea)}.paste,.trash{vertical-align:middle;margin:5px}.paste{margin:5px}