CSS Flexbox vertical centering

This is horizontally and vertically centered with flexbox.

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered with CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<main>
<h3>Welcome to CSS Flexbox</h3>
<p>This is horizontally and vertically centered.</p>
</main>
</body>
</html>

CSS

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    Calibri,
    Candara,
    Segoe,
    Segoe UI,
    Optima,
    Arial,
    sans-serif;

  /** font size grows 1px for every 100px of viewport width **/
  font-size: calc(16px + 1vw);

  /** line-height grows with font size **/
  line-height: calc(1.1em + 0.5vw);
  background: blue
    url(https://unsplash.com/photos/person-standing-under-aurora-lights-UPWuKzAcuUI)
    center center fixed;
  background-size: cover;
}

main {
  background: rgba(0, 0, 0, 0.5);
  width: 75%;
  color: #eaeaea;
  padding: 10%;
  text-align: center;
}