header {
  color: #fff;
  text-align: center;
  height: 60%;
}
main {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  height: 40%;
  border-bottom: 42px solid;
}

/* 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;
  }
}