:root{--dark-background-color:#313338;--header-height:70px}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{flex-direction:column;height:100vh;display:flex;overflow:hidden}button{cursor:pointer}header{background-color:var(--dark-background-color);height:var(--header-height);z-index:1000;border-bottom:1px solid #d3d3d3;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 30px;display:flex;top:0}header>img{height:40px}.layout{flex:1;display:flex;overflow:hidden}header>h1{color:#fff;text-align:left;flex-grow:1;padding-left:10px}.sidebar{background-color:#2b2d31;width:250px;height:100%;padding:20px;overflow-y:auto}.sidebar>nav>ul{margin:0;padding:0;list-style:none}.sidebar>nav>ul>li>a{cursor:pointer;color:#fff;border-radius:4px;padding:10pt 15pt;font-size:larger;text-decoration:none;transition:background-color .2s;display:block}.sidebar li.active>a{background-color:#404249}.sidebar li>a:hover{background-color:#36383e}.content{background-color:var(--dark-background-color);color:#f2f3f5;flex:1;padding:5% 10%;overflow-y:auto}footer{background-color:var(--dark-background-color);color:#f2f3f5;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:100px;padding:20px 10%;display:none}#profile>img{cursor:pointer;border-radius:50%;width:40px;height:40px}