body {
  min-width: 960px; /* This ensures the page will never 'shrink' below 960px. */
  margin: 0;        /* Let's get rid of that annoying default 8px margin around the edge of the page */
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: lightcoral;
}

/* This is all just making my header look nicer */

body > header {
  background-image: url(https://wudesign.me/resources/using-images/images/shelf-cloud-wide.jpg);
  background-position: center;
  background-size: cover;
  color: white;
  font-size: 1.4rem;
}

section {
  background-color: #deeff8;
}


/* The 'calc' strategy for creating variable padding */
/* This strategy requires no 'inner div', it applies directly to the sections. */

body > header,
body > section,
body > footer {
  padding-left: calc(50% - 400px); /* 400px represents "the width of my content, divided by 2" */
  padding-right: calc(50% - 400px);
  padding-top: 30px;
  padding-bottom: 30px;
}


/* The 'safe-area' strategy for creating variable padding */
/* This strategy requires an 'inner div' on each section, with class="safe-area". */

/*
.safe-area {
  width: 800px;
  margin: 30px auto;
}
*/