*{padding:0;margin:0;box-sizing:border-box}html{font-family:Montserrat,sans-serif}body{background:rgba(0,0,0,.5);background-image:url(https://www.transparenttextures.com/patterns/cubes.png)}header{background-color:#000000b3;width:100%;padding:1rem 2rem;box-shadow:0 0 .625rem #0000004d}header h1{color:#ccc;font-family:McLaren,cursive;font-weight:200}footer{position:absolute;text-align:center;bottom:0;width:100%;height:2.5rem}footer p{color:#ccc}.note{background:rgb(255,255,255,.7);border-radius:.4375rem;box-shadow:0 .125rem .3125rem #ccc;padding:.625rem;width:15rem;margin:1rem;float:left}.note h1{font-size:1.1em;margin-bottom:.375rem}.note p{font-size:1.1em;margin-bottom:.625rem;white-space:pre-wrap;word-wrap:break-word}.note button{position:relative;float:right;border-radius:.4375rem;color:#000000b3;border:none;width:2.25rem;height:2.25rem;cursor:pointer;outline:none}form.create-note{position:relative;width:30rem;margin:1.875rem auto 1.25rem;background:#fff;padding:.9375rem;border-radius:.4375rem;box-shadow:0 .0625rem .3125rem #8a8989}form.create-note input,form.create-note textarea{width:100%;border:none;padding:.25rem;outline:none;font-size:1.2em;font-family:inherit;resize:none}form.create-note button{position:absolute;right:1.125rem;bottom:-1.125rem;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:2.25rem;height:2.25rem;box-shadow:0 .0625rem .1875rem #0000004d;cursor:pointer;outline:none}