* {
  box-sizing: border-box;
}
body{
    margin: 0px;
}

p{
    font-family: 'Source Sans Pro';
    font-size: 1.2rem;
}

h1{
    font-family: 'Source Sans Pro';
}

.div_body{
    margin-left: 10%;
    margin-right: 10%;
}


.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
    border-top: 5px solid #690051;
    background-image: url("/static/images/header-photo.jpg"); /* change to your image path */
    background-size: cover;   /* makes the photo cover the whole div */
    background-position: center; /* keeps it centered */
    height: 350px;            /* adjust height as you want */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;             /* text color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* makes text readable */
}

.header-collections {
    border-top: 5px solid #690051;
    background-image: url("/static/images/collections-header.png"); /* change to your image path */
    background-size: cover;   /* makes the photo cover the whole div */
    background-position: center; /* keeps it centered */
    height: 350px;            /* adjust height as you want */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;             /* text color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* makes text readable */
}

.header-people-and-place {
    border-top: 5px solid #690051;
    background-image: url("/static/images/people-and-place-header-1.png"); /* change to your image path */
    background-size: cover;   /* makes the photo cover the whole div */
    background-position: center; /* keeps it centered */
    height: 350px;            /* adjust height as you want */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;             /* text color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* makes text readable */
}

.header-subjects {
    border-top: 5px solid #690051;
    background-image: url("/static/images/subjects-header.png"); /* change to your image path */
    background-size: cover;   /* makes the photo cover the whole div */
    background-position: center; /* keeps it centered */
    height: 350px;            /* adjust height as you want */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;             /* text color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* makes text readable */
}

.header-listen-recordings {
    border-top: 5px solid #690051;
    background-image: url("/static/images/listen-records-header.jpg"); /* change to your image path */
    background-size: cover;   /* makes the photo cover the whole div */
    background-position: center; /* keeps it centered */
    height: 350px;            /* adjust height as you want */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;             /* text color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* makes text readable */
}

.header-search-view {
    border-top: 5px solid #690051;
    background-image: url("/static/images/search_view_header.png"); /* change to your image path */
    background-size: cover;   /* makes the photo cover the whole div */
    background-position: center; /* keeps it centered */
    height: 350px;            /* adjust height as you want */
    display: flex;
    align-items: center;
    justify-content: left;
    color: white;             /* text color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* makes text readable */
}