.sidebar{margin:0;padding:0;width:200px;background-color:#7baa86;position:fixed;height:100%;overflow:auto}.sidebar a{display:block;color:#000;padding:16px;text-decoration:none}.sidebar a.active{background-color:#635046;color:#fff}.sidebar a:hover:not(.active){background-color:#fff;color:#000}div.content{margin-left:200px;padding:4rem;height:100%}@media screen and (max-width:700px){.sidebar{width:100%;height:auto;position:relative}.sidebar a{float:left}div.content{margin-left:0}}@media screen and (max-width:400px){.sidebar a{text-align:center;float:none}}body,html{background-color:#d7d7d7;margin:0}#app,body,html{min-height:100%}#app{font-family:Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}