h1,
 h2,
 h3,
 h4,
 h5 {
   text-rendering: optimizeLegibility;
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-weight: 300;
 }

 a {
   text-decoration: none;
   &:hover {
     text-decoration: underline;
   }
 }

 p {
   margin-top: 0;
   margin-bottom: 1rem;
 }

 body {
   display: flex;
   flex-direction: column;
   align-items: center;
   word-wrap: break-word;
 }

 footer {
   align-items: center;
   font-size: small;
 }

 html {
   font: 100%/1.75 'Roboto', serif;
   box-sizing: border-box;
   overflow-y: scroll;
 }

 #content {
   max-width: 42rem;
   width: 100vw;
   padding: 2.6rem 1.3rem 2.0rem 1.3rem;
 }

 div.highlight {
   border-radius: 6px;
 }

 .navbar {
   border-bottom: 1px solid var(--global-border-color);
   display: flex;
   ul {
     display: flex;
     padding: 0 0 0 0;
     margin: 0 0 0 0;
   }
   ul li {
     list-style-type: none;
     padding: 0.5rem 0.5rem 0.5rem 0.5rem;
     text-align: center;
     a {
       &:hover {
         text-decoration: none;
       }
     }
   }
 }

 @media screen and (max-width:400px) {
   .navbar ul {
     flex-direction: column;
   }
 }