body    { background-color: #000; color: #ccc; width: 100%;
          padding: 0px; box-sizing: border-box; font-family: sans-serif; }
.wrap   { margin: 10% auto 0 auto; max-width: 702px; }
h1, h2  { margin: 0; }
h2 span { white-space: nowrap; }
h3      { display: none; }
header  { text-align: center; }
header h1 { padding: 10px; color: #50afdf; font-size: 28pt; line-height: 28pt; }
header h1 span { color: #308fbf; }
header h1 span.dot { display: inline-block; visibility: hidden; }
header:hover { text-transform: lowercase; font-family: monospace; }
header:hover span:not(.dot) { display: none; }
header:hover span.dot { visibility: visible; }
main    { text-align: center; }
section,article { margin-bottom: 10px; }
a       { outline: 0; }
#me     { border: 1px solid #66c; border-width: 1px 0 1px 0; color: #2c83b7; }
#me h2  { padding: 10px; font-size: 16pt; }
#soc         { display: flex; flex-wrap: wrap; justify-content: space-evenly;
               border: 1px dotted #66c; border-width: 1px 0 1px 0; 
               padding: 5px 0 5px 0; }
#soc div     { display: inline-block; }
#soc > div   { flex-grow: 1; line-height: 0; vertical-align: bottom; }
#soc:hover   { background-color: #001; }
#soc a       { display: block; margin: 0; padding: 5px; border: none; }
#soc a:focus { background-color: #112; padding-bottom: 4px;
               border-bottom: 1px solid #fff; }
#soc a:hover { background-color: #112; padding-bottom: 4px;
               border-bottom: 1px solid #427fed; }
#soc img     { display: block; margin: 0; width: 64px; height: 64px; }
#oss                 { margin-top: 14px; font-size: 11pt; }
#oss > div           { padding: 4px; }
#oss > div > a       { color: #fff; text-decoration: none; border: none; }
#oss > div > a:hover,
#oss > div > a:focus { text-decoration: underline; }
#oss > div:hover > a { color: #427fed; }

@media screen and (min-resolution: 1.25dppx) and (max-width: 595px) {
#soc img { width: 51px; height: 51px; }
}

@media screen and (min-resolution: 1.5dppx) and (max-width: 490px) {
#soc img { width: 42px; height: 42px; }
}

@media screen and (min-resolution: 2dppx) and (max-width: 420px) {
#soc img { width: 32px; height: 32px; }
}