body {
  color: #000000;
  background-image: linear-gradient(to bottom, #fff2ce, #ffffff, #ffffff);
  position: relative;
}

main {
  margin-bottom: 2rem;
  min-height: 50vh;
}

h1 {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

.birth-story-colors-reversed, .birth-story-colors-reversed a, .birth-story-colors-reversed a.active, .birth-story-colors-reversed button {
  background-color: #3c777c;
  color: #fff2ce;
  text-wrap-mode: wrap;
} 

.birth-story-colors-reversed a.active, .birth-story-colors-reversed a:hover {
  color: inherit;
  text-decoration: underline;
}

.nav-link:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
  outline-offset: 0;
}

.navbar-brand {
  font-size: 2.5rem;
}

p {
  padding-top: 1rem;
}

.bux-footer p {
  padding-top: 0;
}

/*Quinn: New styles for Timeline */


/*font */

ul.bibliography {
  list-style-type: none;
  padding-left: 1.5rem;
}

ul.bibliography li {
  margin-bottom: 1rem;
  font-size: 16px;
  text-indent: -1.5rem;
}

ul.nav.nav-pills.nav-stacked {
  background:#ffecb6;
  font-family:"Century";
  font-size:16px;
  font-weight:bold;
  border-radius: 10px;
  top: 30%;
  margin-top: 20px;
  position: sticky;
  left:5%;
 }

 .topic-link > a {
  color:#000000;
 }
 
 .topic-link > a.active, .topic-link > a:focus, .topic-link > a:hover {
 color:#ffffff;
 background-color:#3d3d3d;
 text-decoration: none;
}

.timeline {
 position: relative;
 padding: var(--space-lg) 0;
 padding-top: 20px;
}

.timeline::before {
 content: '';
 background: black;
 width: 5px;
 height: 100%;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}

.timeline-topic-content h2, #timeline_nav .topic-link {
  text-transform: uppercase;
}

.timeline-item , .timeline-topic{
 width: 100%;
 margin-bottom: 70px;
}
.timeline-item .timeline-item-content {
 float: right;
 /* right: -40%; */
 padding: 40px 30px 10px 30px;
}
.timeline-topic .timeline-topic-content {
 float: left;

 padding: 40px 30px 10px 30px;
 }

.timeline-item::after {
 content: '';
 display: block;
 clear: both;
}

.timeline-topic::after {
 content: '';
 display: block;
 clear: both;
}

.timeline-item-content {
 position: relative;
 width: 47%;
 padding: 10px 30px;
 border-radius: 4px;
 background: #f5f5f5;
 box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 font-family: 'Century';
 font-size:17px;
}

.timeline-item-content h2, .timeline-topic-content h2 {
 font-size:24px;
 font-weight: bold;
 padding: 2rem 20px 0 20px;
}

.timeline-item .timeline-item-content::after {
 content: '';
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 left: -15px;
 border-width: 10px 15px 10px 0;
 border-color: transparent #f5f5f5 transparent transparent;
}

.timeline-topic-content {
 position: relative;
 width: 47%;
 padding: 10px 30px;
 border-radius: 4px;
 background: #f5f5f5;
 box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 font-family: 'Century';
 font-size:17px;
}
.timeline-topic-content h2{
 font-weight: bold;
}

.timeline-topic-content::after {
 content: '';
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 right: -15px;
 border-width: 10px 0 10px 15px;
 border-color: transparent transparent transparent #f5f5f5;
}

.timeline-img {
 width: 30px;
 height: 30px;
 background: black;
 border-radius: 50%;
 position: absolute;
 left: 50%;
 margin-top: 25px;
 margin-left: -15px;
}


.timeline-card {
 padding: 0 !important;
}
.timeline-card p, .timeline-card h3 {
 padding: 0 20px;
}


.timeline-item .timeline-img-header {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), center center no-repeat;
 background-size: cover;
}
.timeline-item .timeline-img-header-trade {
 background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), center center no-repeat;
 background-size: cover;
}

.timeline-img-header, .timeline-img-header-trade {
 height: 200px;
 position: relative;
 margin-bottom: 20px;
}
.timeline-img-header h2,.timeline-img-header-trade h2 {
 color: #FFFFFF;
 background-color: rgba(0, 0, 0, 0.3);
 position: absolute;
 bottom: 5px;
 left: 20px;
 right: 20px;
 top: 35px;
}

.date {
 background: #3d3d3d;
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 left: 0;
}

.topicdate {
 background: #3d3d3d;
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 right: 0;
}

h2 {
  padding-top: 10px;
}

.nav.nav-pills.nav-stacked {
  padding: 15px;
  top: 21%;
}

.topic-link a:hover{
  text-decoration: none ;
  background-color: #e5d29c;
}

li.topic-link{
  padding: 10px 0 10px 0;
}

.card-image-top:focus-visible {
  outline: -webkit-focus-ring-color auto 2px;
  outline-offset: 0;
}