body {
  display: flex;
  flex-direction: column;
}

p.about {
  display: none;
}

div.company {
  margin: auto;
}

p.game {
  /* a little buffer on top, with horizontal centering */
  margin: 2em auto auto auto;
  /* draw a box around it */
  border: 1px #000 solid;
  padding: 0.5em;
  width: 30em;
  /* contain a title */
  display: flex;
  flex-direction: column;
}

p.game::before {
  /* add the game's name as a heading */
  content: attr(data-name);
  font-size: larger;
  font-color: #fff;
  /* set it in a light blue box */
  padding: 0.25em;
  margin-bottom: 0.5em;
  background: #ccf;
}

div.timeline {
  /* center within parent flex */
  margin: auto;
  /* width based on font size */
  width: 40em;
  /* a little space from other elements */
  padding: 2em 0;

  /* contain milestones */
  display: flex;
  flex-direction: column;
}
div.timeline div.section {
  display: flex;
  flex-direction: row;
  /* vertical middle */
  order: 2;
}

div.timeline div.section.top {
  /* vertical top */
  order: 1;
}
div.timeline div.section.bottom {
  /* vertical bottom */
  order: 3;
}

div.timeline div.section h1 {
  /* grow into center */
  flex: 1 1 2em;
  /* vertical center */
  margin: auto;
  /* with a little wiggle room on top and bottom */
  padding: 0.5em 0;
  /* leftmost */
  order: 1;

  /* contain a line */
  display: flex;
}
div.timeline div.section span {
  /* fixed width */
  flex: 0 0 2em;
  /* dark green outlined in black */
  background-color: #060;
  border-left: 1px #000 solid;
  border-right: 1px #000 solid;
  /* horizontal middle */
  order: 2;
  /* touch neighbors */
  margin: 0;
}
div.timeline div.section ul {
  /* grow into center */
  flex: 1 1 2em;
  /* rightmost */
  order: 3;
  padding: 0;
}

/* top and bottom of hte mid marker */
div.timeline div.section.top span {
  border-radius: 100% 100% 0 0;
  border-top: 1px #000 solid;
}
div.timeline div.section.bottom span {
  border-radius: 0 0 100% 100%;
  border-bottom: 1px #000 solid;
}

div.timeline div.section h1::after {
  /* draw a line */
  border: 1px #000 solid;
  content: "";
  flex: 1 1 1em;
  max-height: 1px;
  /* left margin */
  margin: auto auto auto 0.25em;
}
div.timeline div.section.top h1::after,
div.timeline div.section.bottom h1::after {
   /* no line */
   border: none;
}

div.timeline div.section ul li {
  margin: 1em 0em;
  list-style-type: none;

  /* contain a line */
  display: flex;
}

div.timeline div.section ul li::before {
  /* draw a line */
  border: 1px #000 solid;
  content: "";
  flex: 1 1 1em;
  max-height: 1px;
  /* right margin */
  margin: auto 0.25em auto auto;
}

div.timeline div.section ul li a {
  font-size: larger;
  color: #000;
  text-decoration: inherit;
}

footer {
  margin-top: 4em;
}