/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

/* Color Swatch
Maroon | #eaeaea | rgb(234, 234, 234);
Pink   | #2f3c4f | rgb(47, 60, 79);
Blue   | #b756a4 | rgb(183, 86, 164);
Gray   | #6b1f0c | rgb(107, 31, 12);
*/

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: rgba(183, 86, 164, 0.5);
    text-shadow: none;
}

::selection {
    background: rgba(183, 86, 164, 0.5);
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
  font-family: 'Quattrocento', arial, serif;
  font-size: 1.5em;
  background-color: #eaeaea;
  color: #2f3c4f;
}

.content, .bio {
  width: 50%;
  max-width: 50%;
  margin: auto;
  text-align: center;
}

h1 {
  text-align: center;
  /*margin: 10px 0 0;*/
  margin: auto;
  line-height: 1.15;
}

dl {
  margin: 0 auto 30px;
  max-width: 300px;
}

dt:after {
  content: ": ";
}

dt {
  float: left;
  width: 50%;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

dd {
  margin-left: calc(50% + 20px);
  text-align: left;
}

a, a:active, a:hover, a:visited {
  color: #6b1f0c;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -1px;
}

a:hover, a:active, a:focus {
  background-color: rgba(183, 86, 164, 0.2);
  outline: none;
}

.bio {
  font-size: 0.8em;
  margin: 20px 0;
}

.bio p {
  margin: 0
}

.bio p::after {
  content: "~";
  margin: 0;
  font-size: 3em;
  line-height: 0.5em;
  display: block;
}

.bio p:last-of-type::after {
  content: "";
  /* Hot Air Ballon by Zlatko Najdenovski from www.flaticon.com */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJmaWxsOiByZ2IoNDcsIDYwLCA3OSk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNMjU2LDBjLTAuMjksMC0wLjU2MywwLjA0My0wLjg2MiwwLjA0M2gtMC4wMDhDMTQ4LjU0OCwwLjQ4Niw2OC4yNjcsODEuMDA3LDY4LjI2NywxODcuNzMzYzAsNTIuMDk2LDMzLjUwMiw5Ny40MzQsNjUuODk0LDE0MS4yODZjMjcuNTQ2LDM3LjI5MSw1My41NzIsNzIuNTE2LDUzLjU3MiwxMDYuMTh2NTEuMmMwLDE0LjExNCwxMS40ODYsMjUuNiwyNS42LDI1LjZoODUuMzMzYzE0LjExNCwwLDI1LjYtMTEuNDg2LDI1LjYtMjUuNnYtNTEuMmMwLTQuNzEtMy44MTQtOC41MzMtOC41MzMtOC41MzNIMjMwLjRjLTQuNzE5LDAtOC41MzMsMy44MjMtOC41MzMsOC41MzNzMy44MTQsOC41MzMsOC41MzMsOC41MzNoNzYuOFY0ODYuNGMwLDQuNzAyLTMuODIzLDguNTMzLTguNTMzLDguNTMzaC04NS4zMzNjLTQuNzEsMC04LjUzMy0zLjgzMS04LjUzMy04LjUzM3YtNTEuMmMwLTM5LjI4Ny0yNy42NDgtNzYuNzA2LTU2LjkxNy0xMTYuMzI2Yy0zMC43NDYtNDEuNjI2LTYyLjU0OS04NC42NjgtNjIuNTQ5LTEzMS4xNGMwLTg3LjE1MSw1OC45MzEtMTU0LjkyMywxNDEuMTMzLTE2OC4xNDlDMTk3LjI5OSw0NS4wNjUsMTUzLjYsOTguMTU5LDE1My42LDE4Ny43MzNjMCw2Ny45NjgsMjEuNywxMTMuOTQ2LDM5LjEzNCwxNTAuODg2YzExLjUxMSwyNC4zODgsMjAuNTk5LDQzLjY0OCwyMC41OTksNjIuNDQ3YzAsNC43MSwzLjgxNCw4LjUzMyw4LjUzMyw4LjUzM3M4LjUzMy0zLjgyMyw4LjUzMy04LjUzM2MwLTIyLjYyMi0xMC4zLTQ0LjQ1OS0yMi4yMzgtNjkuNzM0Yy0xNi43MDgtMzUuMzk2LTM3LjQ5NS03OS40NTQtMzcuNDk1LTE0My41OTljMC05NC4zNjIsNTIuMDctMTQ0LjcsNzYuOC0xNjMuMjc3djM3Ni42MWMwLDQuNzEsMy44MTQsOC41MzMsOC41MzMsOC41MzNzOC41MzMtMy44MjMsOC41MzMtOC41MzNWMjQuNDU3YzI0LjcyMSwxOC41NzcsNzYuOCw2OC45MTUsNzYuOCwxNjMuMjc3YzAsNjQuMTQ1LTIwLjc5NiwxMDguMjAzLTM3LjUwNCwxNDMuNTk5Yy0xMS45MywyNS4yNzYtMjIuMjI5LDQ3LjExMy0yMi4yMjksNjkuNzM0YzAsNC43MSwzLjgxNCw4LjUzMyw4LjUzMyw4LjUzM3M4LjUzMy0zLjgyMyw4LjUzMy04LjUzM2MwLTE4Ljc5OSw5LjA4OC0zOC4wNTksMjAuNTk5LTYyLjQ0N0MzMzYuNywzMDEuNjc5LDM1OC40LDI1NS43MDEsMzU4LjQsMTg3LjczM2MwLTg5LjU3NC00My42OTktMTQyLjY2OS03Mi44NjYtMTY4LjE0OWM4Mi4yMDIsMTMuMjI3LDE0MS4xMzMsODAuOTk4LDE0MS4xMzMsMTY4LjE0OWMwLDUxLjQ3My0zMy41NzksOTMuMzI5LTYzLjIxNSwxMzAuMjYxYy0yMi40ODUsMjguMDE1LTQzLjcxNiw1NC40ODUtNDcuNjMzLDgxLjg2Yy0wLjY2Niw0LjY2OCwyLjU2OSw4Ljk5NCw3LjIzNiw5LjY2YzQuNjkzLDAuNjY2LDguOTk0LTIuNTc3LDkuNjYtNy4yMzZjMy4yNTEtMjIuNzU4LDIzLjA2Ni00Ny40NTQsNDQuMDQxLTczLjZjMzEuMzk0LTM5LjEyNSw2Ni45NzgtODMuNDczLDY2Ljk3OC0xNDAuOTQ1QzQ0My43MzMsODAuNzA4LDM2My4wMjUsMCwyNTYsMHoiPjwvcGF0aD48L2c+PC9zdmc+);
  font-size: 1em;
  line-height: 1.9;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 10px auto;
}

.me {
  font-size: 2em;
  margin: 0 0 30px;
}

canvas {
  margin-top: 10px;
  min-height: 130px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACCCAMAAAC93eDPAAAAkFBMVEUAAAAuPE4vPE8vPE8yPFEvPE8vPE8vPE8vO08xP04vPE4vO04wNUwvPE8vPE8vPE4uPE8vO08vO04vPE8vPU8sPk4uO08uO1AvPE8vPFIvOlEuPE4vPE8wPk8vPVIvPE8uPFAvPE8uO08vPE8vPE4vPE8wPE4wPE8vPE8vPE8vPE8vPE8uPE4uPEwtPE8vPE/MU+oOAAAAL3RSTlMAgPf6CPRQp6kjfCgKoO/hnRpS08YWizLJDxKYrh4mlC3pPdVzs1o33bqH1LZMWoUxxrgAAAi0SURBVHgB7Vl/U+PIDpzYjn8QJ8GBADYJkD1g73bfPX3/b/fOskWjyMwbM3dF1dX2Hy4nRTliWlJLbfcL/ypk2ZdHsNzs3NeiJkrXt197Ckm6oe1F+4/xkgeEkHwriDb5P8NLVVzlASFkbpcIG38zLxd04VxQCK577tnoLC9RyK/KKiwd+eRvC6JTLbzc/S0ZsSgDi1JO/pWoG3nZLhF+TAiLsK60Zw7akRK+GBJjQshzT3H8uVz+yRyURJvx14UXV5VI5YgQqnK7LcYTLU58B9yuU87+/o5oUw8hgBdXLuJD4MPkCz4KuostbS4uNrRdLP66e+5GIsALmPwc8G/3R5HLoVz9kDrYUFKsnFsVCfGd1AZ4iQ4B5FeFhODcj6uRjY7SV8d4PZ1eURvgJToEAETgoxx6lpnaAC9xIaAOfnB/QpuQTB9T750y5NKfhBdXLCKUYbstq1EjfphmyZkuBWiU4XV5eoW+RJw8LtOUSBtKrTLgj+OUAUcBXlRitkRtH8dTkXBLgGLjKbHKgB9Gf6pKE0LmXlPqtGLjKfHKYHgxROACxY4qBoSQgxc+AN2qJYQd0dCWlWKjJeQRIUAPFoXhpRiL8vs6paWcglZsPOXTIUAPpnnhEug70N4ow/ART/l8CKK1WrGR6W06rQwIAU+ZH4JcSnkMyhOZ3m4208qAEPCUz4SAi1FsJQplWWtlUETgMgcIXe5Ob53K8lIS/ZZrZeAqMU+ZBxCIwtJDA8rzhYjSy5WDMtxyldinzIEtBtSB4WVBPZaHFpMUV4l9yizYloBBRU9SHMJVSswGJin83ecUe7oxQrExSY0h3OQ/hQ1MUvg7KHasbJ8DRNy49rDs2Shlgi6KLEKxASOSZpIa0/H33LnVZc9G0YdQ578JL5GKXZ4wKngmqVI4yH8n+qMPYZ2SfBet2PoIrWJnZZG57GXgIBspSblA5LtoxTZjozoKOW/hgEN4Hg5AvrMb4cwQzPAMXviH5edIhfAHh8XfeTbC4BC0MgDZUAK4HEYi3PNzJgVyyDwbYVAIBcraKgPOe7hDbTBD8p13IwwYo9HcjDLg534S/cxd06iw+Dv/Rjh/jbPKcMMdaLjcJ+k649oQXtqQjdCD3EjjhDLcoAPtEyK63jnwErIRBu5yCMEowxV+rhnUsvgmvIRthEDQzmCVgdCB6pQYaZkxL6EbYfgutyitMqgOVC9pxN0ufCMM2eVsWFAGaYwkISR3w8Gsb0M3wpBdTmbTCWVwZVGjA/VEpE9FOrDxGLwRTmN6NrXKoDpQM3DwfU09kmPoRjiN6dnUKgM60GrFRckVkV/3N1XoRmjhn00nlaHNijQtsvuRg/tjSpR0YRuhRcBsapVhdzdw8HQ5cLBaEi0lBLsKeCepgNnUKsPteknjOR0SG4JdiPzeesBsyh+5GEZlSAkYiOhAhL34iyFsNuUQSqUMtClLGrBZf98hHXEAuFSF4QUIm005hBdVitd5c8yvh7vbyyWKEmmAC3Tfzk9ZZntHlrnz2VQuAy91QpQ2vU4f10myfiuLR3PoHl4E2c+l7ul4z6A4+M94FFdvyrB8GHT6WAkvl092l9MHoOsFrxkznRDynoFVwIRww7xwCCtRhjdeGrvL6TQw3ofxs9V7hpfN+9lUX3plSBrR6cc6FV4yK8w+XhAC3m/KdnxbkE1H3LX0Fx5Ep5MH8KIUW7WE0jQMhvGzsR3fy1bA5CMNVAijTq/Ai1Js8CLkW+/D+NnghbeCbNRkbk1yJ0RU/eWJKZGLX7EnmxTM5G/yplO9ZyjRoBUvtT6ACrx4FVtJqAkhw5tO8AJlwKyEcQ1pUIEXv2IjLMD42YoXUYayZnkAL/XboXfCAXjxK7aF9rMVL5v6TBnAS0NjLxqUYaV56XwergH/HPzsc16UMggvTTMuMPmo2MlZeXYeD9fA+Nn6AmWAYg8b3KNShjNeOp+HawA/G2zgDsqAljBucPs9lOGcl8rv4QLws+Gb4j2DhGAaY3OuDDzDehTbeLgGWQbf1PAyIQ84dFbs4zDDehQ7bHKtT8yG4QUHALlES0AjuNO8+D1cCyiD5UWnAUJAATJ4jwAvcvJNYz1cC6vYihcoA4jolDIQxtc6FV4GxRbtNsVg4FFsKAMU+3CtpBEzbLJ6xwu8D+xyPngUuzT2YooOtBrq4FuBPULxIne2MRp4FJvlAYp90GNS35/aMgURihd4H84Hj2LzDKuVoTuhF411sLuTPcI1lhd4H34YxZb+ZBS7247bg+zTBz4f6U+GF+19+GHFWmbYi3ZUbHY3/rvdPmec6e8XurRopT+Bl0fjfXhgFFv6k7z9hMvnuk4y/emSsMvdWV7gfWzGpg0EKDb6kwwNUy6f2uUsL8b7AHyKrYqh5f7UfezyqV3O8ALvox0E3AfzBpqRS3/yuHzHanLHnvY+fJh+A53SZmf7k3H5zI79offhBRY68waaDdWynHD5zC5nedHexwzgDbTf5bO7XHX0eR/hwBvoIJcPgqUmqSfrfcxBuMuHXc5OUsb7mIdwlw+LlJ2ktPcxH9bluzSZjhBCJqn5wC5nXT6zy4VMUrMR6vJBEAMmqXnwuXxmlwudpGZC73K2A6E1hU9SbhaMy2c6EOan4ElqXn8Kc/k4mPBJal5/8rt8cF95VgqdpNwshLt8+33wJDUTM1y+sEnKzcYcly9gkprfmua5fA+eSepzHMx2+dAEpxXbfRJlGezyNWaSUortIhDq8q3sJCXKUB1dBODyHc/dJFueqAij2HGAy3fvVQYzSUUog4bH5cOdnaRWEcpg8H9cPh4k7CT1EKEMBgeiF3XoMgM9vmU62hB4iVIGjexEdNp/5PKNeK8Mk4odheF/+mg2fQM6kFVsF4maOyG3IW+md2vDC5QhDkoZvJmODqR4iYdWhtBMN8oQlwufynTwEg//bGpgeYnHPonN9Hg8Rmd6PD7oQF8FZPrXAZn+hbCZHo9f+B/WnqQQpOTm7QAAAABJRU5ErkJggg==);
}

html, body {
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
/* Display the animation as half the size in displays with higher pixel ratio */
@media only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
                      (min-resolution: 2dppx),
                      (min-resolution: 192dpi) {
  canvas {
    min-height: 65px;
    max-height: 65px;
    background-size: 65px 65px;
  }
}
@media only screen and (max-width: 460px),
            screen and (max-height: 460px) {
  h1 {
    margin-top: 20px;
  }
  .content, .bio {
    max-width: 100%;
    width: 100%;
    padding-bottom: 20px;
    margin: 20px auto;
  }
  .container {
    display: block;
    text-align: center;
  }
  dl {
    width: 100%;
  }
}