*{padding:0;margin:0;box-sizing:border-box}html{font-family:Montserrat,sans-serif}body{background:#eee;background-image:url(https://www.transparenttextures.com/patterns/cubes.png);padding:0 16px}header{background-color:#f5ba13;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:fixed;text-align:center;bottom:0;width:100%;height:2.5rem}footer p{color:#948f8f}.note{position:relative;background:#fff;border-radius:15px;box-shadow:0 2px 5px #ccc;padding:10px;width:240px;margin:10px;float:left}.note h1{font-size:1.1em;margin-bottom:6px}.note p{font-size:1.1em;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word}.btn1{position:relative;float:right;margin-right:0;margin-top:20px;color:#f53613;border:none;width:26px;height:26px;cursor:pointer;outline:none}.btn2{position:relative;float:right;margin-right:5px;margin-top:20px;color:#2df513;border:none;width:26px;height:26px;cursor:pointer;outline:none}form.create-note{position:relative;width:480px;margin:30px auto 20px;background:#fff;padding:15px;border-radius:7px;box-shadow:0 1px 5px #8a8989}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}form.create-note button{position:absolute;flex-direction:row;right:18px;bottom:-18px;background:#f5ba13;color:#fff;border:none;border-radius:50%;width:36px;height:36px;box-shadow:0 1px 3px #0000004d;cursor:pointer;outline:none}.one{position:absolute;flex-direction:row;right:-6px;bottom:-27px;background:#f5ba13;color:#fff;border:none;border-radius:50%;width:36px;height:36px;box-shadow:3px 3px 3px 3px #1010104d;cursor:pointer;outline:none;float:right}.one:hover{background:#f8f7f5;box-shadow:1px 1px 3px 3px #df3421da}.color{position:absolute;flex-direction:row;right:45px;bottom:5px;background:#f5ba13;color:#fff;border:none;border-radius:50%;width:36px;height:36px;box-shadow:0 1px 3px #0000004d;cursor:pointer;outline:none;float:right}.color:hover{background:#a8a8a7;box-shadow:0 1px 3px #0000004d}.close{color:#f53113;padding:6px;background-color:#f6f3f3;float:left;border-radius:10%;box-shadow:3px 3px 3px 3px #1010104d;cursor:pointer}.close:hover{background:#f8f7f5;box-shadow:3px 3px 5px 3px #df3421da}.space{flex-direction:row;justify-content:space-between;flex-flow:row;width:100%}p.date{font-size:10px;position:absolute;flex-direction:row;bottom:0;color:#000;border:none;outline:none;float:right}.head:hover{cursor:pointer;transform:rotate(180deg);transition:transform .5s}