body { background-color: #6699cc;
       font-family: "Optima", "Corbel", "Lucida Grande", "Arimo", sans-serif;
       text-align: center; }
.nav, .content { max-width: 45em;
                 padding: 1em;
                 margin: 0 auto; }
.nav { background-color: #000;
       color: #fff;
       text-align: right;
       padding: 0 1em 0.1em 1em;
       margin-top: 2em; }
.content { background-color: #99ccff;
           text-align: left;
           line-height: 1.5; }
a { text-decoration: none; }
a:hover { color: #336699; }
h1 { border-bottom: solid thin black; margin-top: 0; }
.nav a, .nav a:visited { color: #99ccff; }
.nav a:hover { color: #ccffff; }
pre { overflow-x: auto;
      max-width: 100%;
      background-color: #aaddff;
      margin: 0 0.5em; }
img#photo { width: 192px;
            height: 192px;
            margin-left: 0.5em;
            margin-bottom: 0.5em;
            border-radius: 50%;
            mask-image: radial-gradient(white 68%, transparent 71%); }
@media (max-width: 480px) {
    img#photo { width: 96px; height: 96px; }
    h1 { font-size: 1.4em; }
}