body {
    display: grid;
    margin: 20px;
    font-family: 'Inconsolata', monospace;
    font-weight: lighter;
    text-transform: uppercase;
    background-image: url("images/background.jpg");
    background-repeat: repeat;
}

@media only screen and (max-width: 768px) {
  h1 { font-size: 2em; }
  h2 { font-size: 1em; }
  h3 { font-size: .9em; }
  h4 { font-size: .83em; }
  h5 { font-size: .75em; }
}


@media (min-width: 769px) {
  h1 { font-size: 1.25em; }
  h2 { font-size: 1em; }
  h3 { font-size: .9em; }
  h4 { font-size: .83em; }
  h5 { font-size: .75em; }
}

h1 {
  display: flex;
    align-items: center;
}

h3.header-email {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 768px) {
  h1 {
    margin-bottom: 0px;
  }

  .header-email {
    margin-top: 0px;
  }
}

@media (min-width: 769px) {
  .header-email {
    justify-content: flex-end;
  }
}

h2 {
 margin-bottom: 0px;
}

@media (min-width: 769px) {
  .gallery {
      width: auto;
      overflow-x: scroll;
      white-space: nowrap;
  }

  .gallery figure img {
      max-width: 250px;
      max-height: 250px;
  }
}

@media only screen and (max-width: 768px) {
  .gallery figure {
    margin: 0px;
  }

  .gallery figure img {
      max-width: 100%;
      max-height: 100%;
  }
}

.gallery figure {
 display: inline-block;
}

.gallery figure:first-of-type {
 margin-left: 0px;
}

.gallery figure:last-of-type {
 margin-right: 0px;
}

.gallery figure .caption {
 margin-top: 0px;
}

@media (min-width: 769px) {
  .header-grid {
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: auto auto;
  }

  header {
   margin-bottom: 25px;
  }

  .header-email {
    text-align: end;
  }
}

.header-email span {
  vertical-align: middle;
}

.description {
 margin-bottom: 40px;
}

.description section {
 margin-top: 10px;
}

.description section > * {
 margin-top: 0;
 margin-bottom: 5px;
}

.featherlight.custom-featherlight .featherlight-content {
  background: none;
}

.featherlight.custom-featherlight .featherlight-content .featherlight-close {
  color: #BABDBD;
  background: none;
}

.featherlight.custom-featherlight:last-of-type {
 background: rgba(0,0,0,.8);
}

.featherlight-next:hover, .featherlight-previous:hover {
 background: none;
}

.featherlight-next span, .featherlight-previous span {
  display: inline-block;
  font-size: 10px;
  width: auto;
      color: #BABDBD;
      text-shadow: none;
}

.featherlight-next span {
 right: -20px;
}

.featherlight-previous span {
 left: -20px;
}