.sidenav{height:100%;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px;width:250px}.sidenav a:hover{color:#f1f1f1}#closebtn{position:absolute;top:25px;right:25px;margin-top:14px;font-size:25px}#openbtn{font-size:25px}#footer{color:black;padding:10px;text-align:center;font-size:14px;position:fixed;width:100%;bottom:0}#main{position:fixed;transition:margin-left .5s;padding:16px;top:100px;width:80%;margin-left:300px}.topnav{position:fixed;left:0;top:0;width:100%;background-color:#222;color:white;text-align:center;display:flex;justify-content:space-between;align-items:center}.topnav a{float:left;color:#f2f2f2;text-align:center;padding:14px 16px;text-decoration:none}.footer{position:fixed;left:0;bottom:0;width:100%;background-color:#222;color:white;text-align:center}@media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}.burger:hover{cursor:pointer}div#burger{background-color:white;width:25px;height:3px;margin:6px 0}body{font-family:'Courier New',Courier,monospace;background-color:#2e3440;color:#88c0d0;display:flex;height:100vh;align-items:center;justify-content:center}#appContainer{width:90%;height:85%;display:flex}#side-menu{padding:10px;margin-top:30%}#menu{width:25%;background-color:#3b4252;padding:20px;box-shadow:2px 0 10px rgba(0,0,0,.5);border-radius:5px 0 0 5px}#noteTabs{max-height:70%;overflow-y:auto;margin-bottom:10px}#noteTabs button{width:90%;text-align:left;margin-bottom:5px;background-color:#4c566a;border:none;border-radius:5px;cursor:pointer;color:#d8dee9;padding:8px;transition:background-color .3s}#noteTabs button:hover{background-color:#5e81ac}#noteTabs button.active{background-color:#8fbcbb}#noteContainer{width:75%}h1,h2{text-align:center}#menu_title{font-size:.8em}#noteTitle{background-color:#2e3440;color:#88c0d0;border:none;border-radius:5px;padding:10px;margin-bottom:10px;resize:none;outline:none}#note{width:80%;box-sizing:border-box;height:500px;border:none;border-radius:5px;padding:10px;outline:none;overflow:auto}@media only screen and (max-width:768px){#note{width:100%}#mySidenav{width:0}#main{margin-left:0}}button{display:block;width:100%;margin-top:10px;padding:10px;background-color:#4c566a;border:none;border-radius:5px;cursor:pointer;color:#d8dee9;font-weight:bold;transition:background-color .3s}button.function{margin-top:0;margin-bottom:10px;margin-left:3px;width:auto}button:hover{background-color:#5e81ac}.noteButton{display:flex;justify-content:space-between;align-items:center;width:100%;padding:5px 10px}.deleteText{cursor:pointer;margin-left:10px;font-size:.7em;color:red}#saveStatus{position:relative}#savedFlash{color:green;font-weight:bold;opacity:0;transition:opacity .5s ease;display:none}#header{color:#88c0d0;text-align:center;font-size:14px;position:fixed;width:100%;top:0}#logoAndText{display:flex;align-items:center;margin:0 auto}#logoAndText img{margin-right:10px}#popup{color:black;display:none;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000}#popup-content{margin:2% auto;padding:20px;background:white;width:50%;max-height:70%;text-align:center;overflow-y:auto;position:relative}a,a:visited{color:#895ccc;text-decoration:none}#titleContainer{display:flex;align-items:center}#noteTitle{margin-right:10px}#noteContainer{width:100%;box-sizing:border-box}#titleContainer{display:flex;align-items:center;flex-wrap:nowrap}#noteTitle{flex-grow:1;margin-right:10px;max-width:250px}.tools{margin:30px}hr{width:80%;border:0;height:1px;background-color:#ffffff29;margin:10px auto 10px auto}textarea,input{background-color:#535353!important;color:white!important}#button-container{display:flex;justify-content:start}#button-container .function{margin-right:5px;width:100%}