html {
    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 1em;

    background-color: #2B2B2B; 
    color: #D4D4D4;
  }
  body {
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
    margin-right: auto;
  }
  #header {
    font-size: 1.2em;
    text-align: -webkit-center;
  }
  a {
    color: green;
  }
  .circular-mask {
    width: 9em;
    height: 9em;
    overflow: hidden;
    border-radius: 50%;
    margin-top: 1em;
  }
  .circular-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #signature {
    font-style: italic;
  }
  #links {
    margin: auto;
    font-size: .9em;
  }
  #links td {
    padding: 0 .3em 0 .3em;
  }
  #links tr td:first-child {
    text-align: right;
    padding: .1em 0 .2em 0;
  }
  hr {
    width: 96%;
  }
  #bio {
    font-size: .8em;
    width: 96%;
    margin-left: auto;
    box-sizing: border-box;
    margin-right: auto;
  }
  .bio-parahgraph {
    width: 90%;
    padding: .1em .5em;
  } 
  .keyword {
    color: #569CD6;
  }
  .comment {
    color: #608B4E;
  }
  .string {
    color: #D69D85;
  }
  .number {
    color: #B5CEA8;
  }
  #footer {
      width: 96%;
      padding: .1em .5em;
    font-size: .7em;
    font-style: italic;
    text-align: right;
  }
  @media only screen and (min-width: 768px) {
    #bio {
      width: 68em;
    }
    .bio-parahgraph {
      max-width: 26em;
      font-size: 1.2em;
      display: inline-block;
      vertical-align: top;
    } 
  }