@import 'colors.css';
@custom-media --three-piece-viewport (min-height: 6in);
@custom-media --two-sided-viewport (min-width: 8.5in);

html, body {
  background: var(--blog-background);
  font-family: 'Source Sans Pro';
  margin: 0;
  padding: 0;
}

.blog {
  background: var(--blog-background);
  min-height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  color: var(--blog-text);
}

a, a:visited {
  color: var(--blue);
}

@import 'colors.css';
@custom-media --three-piece-viewport (min-height: 5in);
@custom-media --two-sided-viewport (min-width: 8.5in);

html, body {
  background: var(--blog-background);
  font-family: 'Source Sans Pro';
  margin: 0;
  padding: 0;
}

.blog {
  background: var(--blog-background);
  min-height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  color: var(--blog-text);
}

a, a:visited {
  color: var(--blue);
}

Make 5in to min-height of a three-piece viewport
Make 5in to min-height of a three-piece viewport
