/*
!!!!
This pen is being refactored
!!!!
*/

/*
=====
DEPENDENCES
=====
*/

.r-title {
  margin-top: var(--rTitleMarginTop, 0) !important;
  margin-bottom: var(--rTitleMarginBottom, 0) !important;
}

p:not([class]) {
  line-height: var(--cssTypographyLineHeight, 1.78);
  margin-top: var(--cssTypographyBasicMargin, 1em);
  margin-bottom: 0;
}

p:not([class]):first-child {
  margin-top: 0;
}

/*
text component
*/

.text {
  display: var(--textDisplay, inline-flex);
  font-size: var(--textFontSize, 1rem);
}

/*
time component
*/

/*
core styles
*/

.time {
  display: var(--timeDisplay, inline-flex);
}

/*
extensions
*/

.time__month {
  margin-left: var(--timelineMounthMarginLeft, 0.25em);
}

/*
skin
*/

.time {
  padding: var(--timePadding, 0.25rem 1.25rem 0.25rem);
  background-color: #5e42a6;

  font-size: var(--timeFontSize, 0.75rem);
  font-weight: var(--timeFontWeight, 700);
  text-transform: var(--timeTextTransform, uppercase);
  color: white;
  border-radius: 100px;
}

/*
card component
*/

/*
core styles
*/

.card {
  padding: var(--timelineCardPadding, 1.5rem 1.5rem 1.25rem);
}

.card__content {
  margin-top: var(--cardContentMarginTop, 0.5rem);
}

/*
skin
*/

.card {
  border-radius: 10px;
  border-left: 3px solid #5e42a6;
  box-shadow: var(
    --timelineCardBoxShadow,
    0 1px 3px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px 0 rgba(0, 0, 0, 0.24)
  );
  background-color: white;
  color: #312450 !important;
}

/*
extensions
*/

.card__title {
  --rTitleMarginTop: var(--cardTitleMarginTop, 1rem);
  font-size: var(--cardTitleFontSize, 1.25rem);
}

/*
=====
CORE STYLES
=====
*/

.timeline {
  display: var(--timelineDisplay, grid);
  grid-row-gap: var(--timelineGroupsGap, 2rem);
}

/*
1. If timeline__year isn't displaed the gap between it and timeline__cards isn't displayed too
*/

.timeline__year {
  margin-bottom: 1.25rem; /* 1 */
}

.timeline__cards {
  display: var(--timeloneCardsDisplay, grid);
  grid-row-gap: var(--timeloneCardsGap, 1.5rem);
}

/*
=====
SKIN
=====
*/

.timeline {
  --uiTimelineMainColor: var(--timelineMainColor, #222);
  --uiTimelineSecondaryColor: var(--timelineSecondaryColor, #a8d1ff);

  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.timeline__year {
  --timePadding: var(--timelineYearPadding, 0.5rem 1.5rem);
  --timeFontWeight: var(--timelineYearFontWeight, 400);
  background-color: #5e42a6;
  color: white;
  border-radius: 100px;
}

.timeline__card {
  position: relative;
  margin-left: var(--timelineCardLineGap, 1rem);
}

/*
1. Stoping cut box shadow
*/

.timeline__cards {
  overflow: hidden;
  padding-top: 0.25rem; /* 1 */
  padding-bottom: 0.25rem; /* 1 */
}
/*
=====
SETTINGS
=====
*/
/**/
.timeline {
  --timelineMainColor: #4557bb;
}

/*
=====
DEMO
=====
*/

body {
  font-family: "Montserrat", sans-serif;
  color: #222;

  background-color: #a8d1ff;
  margin: 0;
  display: flex;
  flex-direction: column;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.5;
}

p:last-child {
  margin-bottom: 0;
}

.page {
  max-width: 47rem;
  padding: 5rem 2rem 3rem;
  margin-left: auto;
  margin-right: auto;
}

.substack {
  border: 1px solid #a8d1ff;
  background-color: #a8d1ff;
  width: 100%;
  max-width: 480px;
  height: 280px;
  margin: 1rem auto;
}