/* Fonts (optional) */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap");

/* Variables */
:root{
  --background:#000000;
  --color-primary:#7997B4;
  --color-light:#ffffff;
  --spacing:50px;
  --radius:4px;

  --date:120px;
  --dotborder:4px;
  --dot:11px;
  --line:4px;

  --font-title:"Oswald",sans-serif;
  --font-text:"Source Sans Pro",sans-serif;
}

/* Base */
body{
  background:var(--background);
  font-size:16px;
  color:#fff;
  font-family:var(--font-text);
}

strong{font-weight:600;}

h1{
  font-family:var(--font-title);
  letter-spacing:1.5px;
  color:var(--color-light);
  font-weight:100;
  font-size:1.4em;
}

#content{
  margin-top:var(--spacing);
  text-align:center;
}

/* Timeline (expects: <ul class="timeline"><li class="event" data-date="...">...</li>...) */
.timeline{
  border-left:var(--line) solid var(--color-primary);
  border-bottom-right-radius:var(--radius);
  border-top-right-radius:var(--radius);
  background:rgba(255,255,255,0.03);           /* fade(@color-light,3%) */
  color:#ffffff;
  font-family:var(--font-text);
  margin:var(--spacing) auto;
  letter-spacing:.5px;
  position:relative;
  line-height:1.4em;
  font-size:1.03em;
  padding:var(--spacing);
  list-style:none;
  text-align:left;
  font-weight:100;
  max-width:65%;
}

/* Headings inside the timeline */
.timeline h1,
.timeline h2,
.timeline h3{
  font-family:var(--font-title);
  letter-spacing:1.5px;
  font-weight:100;
  font-size:1.4em;
  margin:0 0 .35em 0;
}

/* Event rows */
.timeline .event{
  border-bottom:1px dashed rgba(255,255,255,0.10);
  padding-bottom:calc(var(--spacing) * .5);
  margin-bottom:var(--spacing);
  position:relative;
}

.timeline .event:last-of-type{
  padding-bottom:0;
  margin-bottom:0;
  border:none;
}

/* Date label (left side) */
.timeline .event::before{
  position:absolute;
  display:block;
  top:0;
  left:-218px;                 /* calc of the LESS formula */
  color:#ffffff;
  content:attr(data-date);
  text-align:right;
  font-weight:normal;
  font-size:16px;
  min-width:var(--date);
}

/* Dot on the line */
.timeline .event::after{
  position:absolute;
  display:block;
  top:5px;
  left:-58px;                  /* calc of (spacing + line + dot*.35)*-1 */
  width:var(--dot);
  height:var(--dot);
  content:"";
  background:#0d0d0d;          /* lighten(#000,5%) */
  border-radius:50%;
  box-shadow:0 0 0 var(--dotborder) rgba(22, 255, 77, 1);
}