html {
  height: 100%;
}

body {
  box-sizing: border-box;
  min-height: 100%;

  font-size: 1.3em;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;

  margin: 0;
  padding: 35px 20px;

  background:
    linear-gradient(
      to bottom,
      #f0f0f0,
      #f5f5f5 5%,
      #f4f4f4 25%,
      #e7e7e7 50%,
      #aaaaaa
    );
}

h1 {
  margin: 0 0 .4em 0;
  font-size: 2.5em;
  font-weight: 900;
  line-height: normal;
}

h1 span {
  display: block;
  margin-left: -.07em;
  color: #beec00;
  font-size: 2.4em;
  line-height: .8;
  text-transform: uppercase;
}

p {
  margin: 0;
}

p span {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 640px) {
  body.photo {
    background:
      url(/bg.jpg),
      linear-gradient(
        to bottom,
        #f0f0f0,
        #f5f5f5 5%,
        #f5f5f5 10%,
        #f4f4f4 25%,
        #eee 40%,
        #e7e7e7 50%,
        #ddd 60%,
        #d9d9d9 65%,
        #d5d5d5 70%,
        #ccc 75%,
        #c5c5c5 80%,
        #b6b6b6 90%,
        #b2b2b2 95%,
        #b5b5b5 97%,
        #aaa
      );
    background-size: auto 100%;
    background-position: top right;
    background-repeat: no-repeat;
  }
}