*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif}.app{padding:50px;height:100vh;background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url(e3a3a52cfcc3ba477166.jpg);background-size:cover}h1{color:#fff}h1 span{display:block;color:#ccc;font-size:14px;font-style:italic;height:14px}.note-form{display:flex;flex-direction:column;width:200px}.note-form textarea{font-family:Arial,Helvetica,sans-serif;border:1px solid #d3d3d3;min-width:100%;max-width:100%;height:100px;padding:10px;outline:none}.note-form button{width:100%;background-color:#fff27f;cursor:pointer;padding:10px;border:0;outline:none}.note-form button:hover{background-color:tomato;color:#fff}.note{position:absolute;cursor:pointer;background-image:url(bb24903ea64aa151612a.png);background-size:cover;top:100px;left:300px;height:200px;width:200px;padding:20px}.note .text{font-family:Arial,Helvetica,sans-serif;height:100%;width:100%;white-space:pre-wrap;overflow-y:auto}.note .close{width:15px;height:15px;position:absolute;right:15px;transition:transform .3s ease}.note .close:hover{transform:scale(1.6)}