master.css

@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
:root {
  --color-primary: blue;
  --color-accent: orange;
}

.mainGrid {
  display: grid;
  /* grid-template: auto 1fr 100px / 1fr; */
  grid-template-rows: auto 1fr 100px;
  grid-template-columns: 1000px;
  max-width: 1000px;
  margin: auto;
  background-color: #fffff0;
  font-family: 'Roboto', sans-serif;
}

.pageHeader {
  grid-area: 1 / 1 / 2 / 2;
  font-family: 'Tangerine', cursive;
  font-size: x-large;
}

.content {
  grid-area: 2 / 1 / 3 / 2;
  margin-right: 20px;
}

/* .sidebar {
  grid-area: 2 / 2 / 3 / 2;
} */

.pageFooter {
  grid-area: 3 / 1 / 4 / 2;
}

.subtitle {
  margin-top: 0px;
  font-family: 'Tangerine', cursive;
  font-size: xx-large;
}

/* .pageTitle {
  margin-bottom: 0px;
} */

.sideImage {
  max-width: 250px;
}

.italics {
  font-style: italic;
}

@media screen and (min-width: 0px) and (max-width: 1000px) {
  .sidebar {
    display: none;
  }
  .mainGrid {
    margin-left: 20px;
    margin-right: 20px;
    grid-template-columns: 100%;
    /* max-width: 360px; */
  }
  .content {
    margin-right: 0px;
  }
}