.homepage {

  /* full bleed white. */
  flex-grow: 1;
  background: white;

  display: flex;
  flex-direction: column; /* main axis is vertical. */

  /* justify-content: center;  center children on main axis (vertically). */
  align-items: center;  /* center on cross axis (horizontally). */
  overflow:auto;
  padding-top:80px;

}

/* only way I found to avoid overflow on narrowing windows when align-items and justify-center are used together */
.homepage-body {

  display: flex;
  flex-direction: column;
  align-items: center;
}

.homepage-title {

  font-size: xx-large;
  color:black;
}

.homepage-subtitle {

  font-size: x-large;
  color: var(--theme-primary);
}

.homepage-description {

  margin-top:30px;
  margin-bottom:50px;
  max-width:40%;
  font-size: large;
  text-align: center;
}

.homepage-tile {


  display: flex;
  flex-direction: column;
  align-items: center;

}

.homepage-tile-icon {

  margin-top:50px;
  font-size: 56px;
  color: black;
  margin-bottom:20px
}

.homepage-tile-title {

  font-size: x-large;
  color: black;

}

.homepage-tile-description {

  font-size: larger;
  text-align: center;
  width: 220px;
  height: 60px;
  overflow: auto;

}


.homepage-tile-button {

  margin-top: 20px;
  font-size: larger;

}

.homepage-tile-button.btn:hover {

  color:white;
  background: var(--theme-background-dark) !important;

}