* {
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.5; }

#main-doc {
  display: flex; }
  #main-doc #navbar {
    width: 25vw;
    height: 100%;
    min-width: 10rem;
    border-right: 1px gray solid;
    position: fixed; }
    #main-doc #navbar header {
      padding: 1rem 0.5rem;
      border-bottom: 1px grey solid;
      display: flex;
      justify-content: center; }
    #main-doc #navbar .nav-item {
      border-bottom: 1px grey solid;
      padding: 0.5rem; }
      #main-doc #navbar .nav-item a {
        text-decoration: none;
        color: black; }
  #main-doc #main-content {
    width: 100%;
    padding: 0 1rem 0 calc(25vw + 2rem);
    display: block;
    left: 300px; }
    #main-doc #main-content .main-section header {
      margin: 1rem 0; }
    #main-doc #main-content .main-section .content p {
      margin: 1rem 0; }
    #main-doc #main-content .main-section ul {
      margin-left: 3rem; }
      #main-doc #main-content .main-section ul li {
        margin: 1rem 0; }
    #main-doc #main-content .main-section .code-block {
      background-color: #f7f7f7;
      padding: 2rem; }

@media (max-width: 500px) {
  #main-doc {
    flex-direction: column; }
    #main-doc #navbar {
      position: relative;
      width: 100%;
      border-right: 0; }
      #main-doc #navbar header {
        width: 100%; }
    #main-doc #main-content {
      left: 0;
      width: 100%;
      padding: 0.5rem; } }

@media (max-height: 500px) {
  #navbar {
    overflow-y: auto; } }