.home-page {
  width: 100%;
}

.home-page-avatar {
  border-radius: 100%;
}

.summary {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

h1 {
  text-align: center;
}

@media screen and (min-width: 770px) {
  .left-column {
    margin-right: 2em;
  }

  .right-column {
    border-left: 1px solid grey;
    padding-left: 2em;
  }
}

@media screen and (max-width: 770px) {
  .left-column {
    margin-right: 0em;
    margin-bottom: 1em;
  }

  .right-column {
    border-top: 1px solid rgb(86, 86, 86);
    padding-left: 0em;
    padding-top: 2em;
  }

  .home-page-avatar {
    border-radius: 100%;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
  }
}

/*-- buttons --*/
.btn {
  border-color: rgba(255, 255, 255); /* Remove borders */
  color: white; /* White text */
  padding: 2px 20px; /* Some padding */
  font-size: 14px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #375a7f;
}