.page {
  padding: 20px;
  background-color: #e1e4e8;
  overflow: hidden;
}

.page-text {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 80%;
  margin: auto;
}

.page-image {
  padding-top: 30px;
  padding-bottom: 20px;
  width: 85%;
  margin: auto;
}

h1 {
  font-size: 1.9em;
  padding-bottom: 30px;
}

h3 {
  font-size: 1.3em;
}

.center-text {
  text-align: center;
}

.review {
  list-style-type: none;
}

.review-item {
  padding-top: 10px;
  text-align: center;
}

.about-image {
  padding-top: 20px;
  width: 70%;
  margin: auto;
}

.about-info {
  padding-top: 20px;
  width: 90%;
  margin: auto;
}

.footer {
  display: flex;
  height: 120px;
  background-color: #3a3c40;
  align-items: center;
  justify-content: center;
}

.footer-info {
  color: #959ba3;
  margin: auto;
  width: 100%;
  text-align: center;
}

.author {
  font-size: 0.8em;
}

.github-link-container {
  padding: 10px;
}

.github-link,
.github-link:visited {
  color: #959ba3;
}

.github-link:hover,
.github-link:visited:hover {
   color: #c7cbd1;
 }

 .masonry-container {
   width: 98%;
   margin: auto;
   column-count: 1;
   column-gap: 1em;
 }

 .item {
   display: inline-block;
   margin: 0 0 1em;
   width: 100%;
 }

/* Tablet */
@media screen and (min-width: 501px) {
  .page-image {
    width: 60%;
  }
  .masonry-container {
    column-count: 2;
  }
  .about-image {
    padding-top: 20px;
    width: 50%;
    margin: auto;
  }
}

/* Desktop */
@media screen and (min-width: 992px) {
  body {
    background-color: #d0d4d9;
  }
  .page {
    width: 80%;
    margin: auto;
  }
  .masonry-container {
    column-count: 3;
  }
  .about-image {
    padding-top: 20px;
    float: right;
    width: 30%
  }
  .about-info {
    padding-top: 20px;
    float: left;
    width: 65%;
  }
}