@lato: 'Lato', sans-serif;
@merri: 'Merriweather', serif;
@color-blue: #404658;
@color-white: white;
@spacing: 10px;

body, html {
  padding: 0;
  margin: 0;
}

.container {
  width: 720px;
  margin: auto;
}

article {
  h1 {
    font-family: @lato;
    font-weight: 300;
    font-size: 40px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid fade(@color-blue, 15%);
  }

  h2 {
    font-size: 26px;
    font-weight: 400;
    font-family: @lato;
  }

  p {
    font-family: @merri;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
  }

  img {
    width: 100%;
    margin: (@spacing * 2) 0;
    padding: @spacing;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);

    &:hover {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }
  }
}

footer {
  text-align: center;
  font-family: @lato;
}