cbillowes/curious-programmer-oxygen

header h2 {
  font-size: 1em !important;
}
header p {
  padding: 0px;
}
.timeline > li {
  list-style: none;
}
.timeline > li .description .label {
  display: inline-block;
  margin: 0 1% 1% 0;
  padding: 6px 10px;
}
.timeline .label {
  border-radius: 5px;
  background-color: #18181825;
}

@media screen and (max-width: 1023px) {
  .timeline > li .meta {
    display: block;
    padding-top: 20px;
  }
  .timeline > li:first-child .meta {
    padding-top: 0px;
  }
  .timeline > li .meta h2 {
    font-size: 1.5em;
  }
  .timeline > li .description {
    margin-left: 0px;
    margin-right: 25px;
    margin-top: 5px;
    padding: 1em;
    border-left: none;
    border: solid 1px #21252933;
    overflow-x: auto;
    width: 90%;
  }
  .timeline > li .icon {
    position: relative;
    float: right;
    left: auto;
    margin: -1em 25px 0 0;
  }
}

@media screen and (min-width: 1024px) {
  .timeline {
    display: block !important;
    margin: 50px 0;
    padding: 0;
    list-style: none;
    position: relative;
    /* The line */
  }
  .timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #161e2522;
    border-radius: 3px;
    left: 40%;
    margin-left: -10px;
  }
  .timeline > li {
    position: relative;
    /* Left content */
    /* Right content */
  }
  .timeline > li .meta {
    display: block;
    width: 45%;
    padding-right: 165px;
    text-align: right;
    position: absolute;
  }
  .timeline > li .meta h2 {
    font-size: 1.2em;
    line-height: 2em;
    margin-top: 0em;
  }
  .timeline > li .meta span {
    display: block;
  }
  .timeline > li .meta span:first-child {
    padding-top: 0.5em;
  }
  .timeline > li .description {
    margin: 25px 20% 25px 43%;
    padding: 1.5em 2em;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 10px;
    background-color: #1a232c22;
    overflow-x: scroll;
    /* The triangle */
  }
  .timeline > li .description ul {
    margin: 12.5px 0 25px 0;
  }
  .timeline > li .description ul li {
    line-height: 2em;
  }
  .timeline > li .description h3 {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 2em;
  }
  .timeline > li .description p {
    margin: 10px 0 10px 0;
  }
  .timeline > li .description:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 25px;
    top: 10px;
    border-right-color: #1a232c22;
  }
}