header {
  color: #fff;
  text-align: center;
}
main {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  background-size: auto 100%;
  background-position: center;
}

/* MODAL */
.modal-content {
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.modal-content .card {
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-color: #333;
}
.modal-content .carousel-caption {
  background-color: rgba(0, 0, 0, 0.85);
}

@media only screen and (max-width: 567px) {
  header {
    height: 30%;
  }
  main {
    height: 70%;
  }
  .avatar img {
    max-width: 100px;
  }
}