*{padding:0;margin:0;box-sizing:border-box}html{font-family:Montserrat,sans-serif}body{padding:0 16px;background-color:#b3d8a8}header{background-color:#3d8d7a;margin:auto -16px;padding:16px 32px;box-shadow:0 0 10px #0000004d}header h1{color:#fff;font-family:McLaren,cursive;font-weight:200}footer{position:absolute;text-align:center;bottom:0;width:100%;height:2.5rem}footer p,a{color:#fbffe4}.notes{display:flex;flex-wrap:wrap;align-items:flex-start}.note{background:#fff;border-radius:7px;padding:10px;width:260px;margin:16px}.note p{font-size:1.3em;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word}.note button{position:relative;float:right;color:#a3d1c6;width:36px;height:36px;cursor:pointer;outline:none;border:none}form.create-note{position:relative;width:100%;margin:30px auto 20px;background:#fbffe4;padding:15px;border-radius:1px}form.create-note input,form.create-note textarea{width:100%;border:none;padding:4px;outline:none;font-size:1.2em;font-family:inherit;resize:none;background-color:#fbffe4}form.create-note button{position:absolute;right:18px;bottom:-28px;background:#a3d1c6;color:#fff;border:none;border-radius:50%;width:56px;height:56px;cursor:pointer;outline:none}form.create-note button:hover{position:absolute;right:18px;bottom:-28px;background:#c4dad2;color:#fff;border:none;border-radius:50%;width:56px;height:56px;cursor:pointer;outline:none}