* { box-sizing:border-box; }

body { background:#000; margin:0px; color:#FFF; font-family:Arial;}

.container { display:flex;}
			
.sidebar { position:relative; height:100vh; flex:1; flex-grow:0; flex-shrink:0; flex-basis:200px; background:#131313;}
.sidebar .new_note a { display:block; text-decoration:none; padding:10px; color:#ffcc00; font-size:20px;}
.sidebar .new_note:hover a { color:#FFF; cursor:pointer; }
.sidebar ul { margin:0px; padding:0px; margin-top:0px; }
.sidebar ul li { list-style:none; }
.sidebar ul li a { display:block; color:#CCC; text-decoration:none; font-family:monospace; display:block; font-size:15px; padding:5px 10px; }
.sidebar ul li a:hover { color:#ffcc00; cursor:pointer;}
.sidebar .unhide { display:block; padding:10px; cursor:pointer; }
.sidebar .unhide .middot { display:block; border-radius:100%; background:#ffcc00; width:6px; height:6px; }
.sidebar .unhide:hover .middot { background:#FFF; }
.sidebar brand { position:absolute; top:4px; left:30px; font-family:monospace; font-size:13px; color:#CCC;}
.sidebar brand span { color:#fff; }

.sidebar.hide { position:fixed; height:auto;}
.sidebar.hide brand { display:none; }
.sidebar.hide .new_note { display:none; }
.sidebar.hide ul { display:none; }

.main { flex:3; padding:10px; display:flex; flex-direction:column;}
.main .write { outline:0px; background:#000; font-size:25px; color:#FFF; font-family:monospace; display:block; padding:20px; padding-top:50px; width:100%; height:100vh;}
.main .control { opacity:0.3; position:fixed; border-top-left-radius:20px; border-bottom-left-radius:20px; transition:1s; bottom:0px; right:0px; width:300px; display:flex; justify-content:space-between; padding:5px; background:#555; padding-right:5px;}
.main .control:hover { opacity:1; transition:0.1s}
.main .control .tips { color:#afafaf; font-size:12px; padding-top:6px; padding-left:10px; }
.main .control button { cursor:pointer; background:#7d7d7d; border:1px solid #7d7d7d; padding:5px 20px; color:#d4d4d4; text-transform:uppercase; }
.main .control button.save:hover { background:#ffcc00; color:#333;}
.main .control button.delete:hover { background:red; color:#FFF;}