@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Kreon);
* {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0; }
  *::selection {
    background-color: #79ab4d;
    color: white; }

body {
  max-width: 45em;
  margin: 0 auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 4.5em; }

html {
  font-size: 18px; }

h1, h2, h3, h4, h5, h6 {
  width: 100%;
  text-align: center; }

.avatar {
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  margin-top: 4.5em;
  margin-bottom: 1em;
  width: 10em;
  height: 10em; }

h1 {
  font-family: 'Kreon', serif;
  font-size: 3.5rem; }

h2 {
  font-size: 1.7rem;
  margin-bottom: 0.5em; }

.awful {
  text-decoration: line-through; }

.occupation {
  text-align: center;
  font-size: 1.45rem;
  margin-bottom: 5.6em; }

em {
  font-style: normal;
  font-family: 'Hack', monospace;
  font-weight: bold; }

p + p {
  margin-top: 1em; }

p {
  font-size: inherit;
  line-height: 1.6em; }

a, a:hover, a:visited, a:active {
  color: #60883d; }

section + section {
  margin-top: 2.5em; }

.signature {
  display: block;
  width: 3rem;
  margin: 4.5em auto; }

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) {
  .signature {
    width: 3rem; } }
@media only screen and (max-height: 400px) {
  .avatar {
    margin-top: 3.5em;
    margin-bottom: 0.5em; }

  .occupation {
    margin-bottom: 2em; } }
@media only print {
  body {
    max-width: 30em;
    padding-bottom: 0; }

  .avatar {
    float: left;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(filters.svg#grayscale);
    /* Firefox 4+ */
    filter: gray;
    /* IE 6-9 */ }

  h1 {
    padding-top: 1.75em;
    padding-left: 3.5em;
    display: block;
    text-align: left; }

  .occupation {
    text-align: left;
    padding-left: 8.6em;
    margin-bottom: 3.5em; }

  a, a:hover, a:visited, a:active {
    color: black;
    text-decoration: none; }

  .signature {
    margin-bottom: 0; } }