/* CSS Document */

/* section navigation */
.card a {
  color: var(--black);
  text-transform: uppercase; 
  font-weight: bold; 
  letter-spacing: 0.15rem; 
}

.card.active, .set-bg { 
  background-color: var(--red); 
}

.card.active a, .set-bg a { 
  color: var(--white);
}

.alpha {
  padding: 0.5rem 1rem; 
  border: 1px solid var(--border-gray); 
  margin: 3px; 
  text-align: center; 
}

/* end section navigation */

/* typography */

main h2 {
  padding-bottom: 0; 
  font-size: 4rem; 
  color: var(--black);
}

.excerpt h2 { 
  padding-top: 1rem; 
  color: var(--black);
  font-size: 4rem; 
}

.excerpt h2 { 
  border-bottom: 2px solid var(--black); 
}

.feature h3 { 
  font-size: 3rem; 
  padding-bottom: 0.5rem;
}

.feature h4 { 
  font-size: 2rem;
  padding: 0.5rem 0 1rem;
  text-transform: none; 
  font-weight: 600;
}

.feature p, .art-info p {
  font-size: 1.125rem;
}

.feature p + h3, 
.feature hr + h3 {
  font-size: 2rem;
  color: var(--heavy-gray); 
  padding: 0.5rem 0 1rem;
}

.feature ol {
  font-size: 1.125rem;
}

.dateHeading h2 {
  color: var(--white);
  font-size: 2rem;
}

/* end typography */

/* image display */ 
.art-info {
  border: 1px solid rgba(0,0,0,.125); 
  border-radius: .25rem; 
  padding: 15px;
  background-color: var(--off-white);
}

.coverImage { 
  background-color: var(--off-white);
}

.coverImage img {
  max-height: 400px;
}

.art-info img, 
.image-section div img {
  max-width: 100%; 
  max-height: 500px; 
  padding: 5px; 
  margin-bottom: 10px;
}

.image-section {
  margin-bottom: 20px;
}

.image-section div img {
  border: 1px solid rgba(0,0,0,.125); 
}
/* end main feature image display */

/* to sort */

.feature strong { 
  color: var(--heavy-gray); 
}

.art-tiles { 
  display: flex; 
  flex-wrap: wrap; 
}

.art-tiles > [class*='col-'] { 
  display: flex; 
  flex-direction: column; 
}

.pubs, .dateRange { 
  background-color: var(--off-white);
}

.dateRange { 
  background-color: var(--black);
}

.dateRange p {
  color: var(--white);
}

.pubs ul {
  list-style: none;
  padding: 0;
}

.pubs .navbar {
  padding: 0;
}

h3.img-header { 
  font-size: 3rem; 
  color: var(--black); 
  padding-bottom: 0.5rem; 
  padding-left: 0.5rem;
}

.dateContainer {
  background-color: var(--black); 
}

.feature hr {
  width: 50%;
}

.article__body--divider {
  text-align: center;
}

.article__body--lang {
  background-color: var(--off-white);
  padding: 40px;
  margin-bottom: 15px;
}