/* ================ The Timeline ================ */
:root {
    --text-color: rgb(50,50,50);
    --bg-color: rgb(230,230,230);
    --timeline-bg: rgb(80,80,80);
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1
}
 li {
    display: list-item;
    text-align: -webkit-match-parent;
}
  .timeline {
    position: relative;
    width: 100%;
    margin: 0 auto;
    margin-top: 60px;
    padding: 1em 0;
    list-style-type: none;
  }

 .timeline:before {
     position: absolute;
     left: 50%;
     top: 0;
     content: ' ';
     display: block;
     width: 6px;
     height: 100%;
     margin-left: -3px;
		 background: linear-gradient(to bottom, rgba(51, 65, 85, 0) 0%, var(--slate-700) 8%, var(--slate-700) 92%, rgba(51, 65, 85, 0) 100%);

     z-index: 5;
 }

.timeline {
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none
}

    .timeline:before {
        position: absolute;
        left: 50%;
        top: 0;
        content: ' ';
        display: block;
        width: 6px;
        height: 100%;
        margin-left: -3px;
        background: #505050;
        background: -moz-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(30,87,153,1)),color-stop(100%,rgba(125,185,232,1)));
        background: -webkit-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background: -o-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background: -ms-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background: linear-gradient(to bottom,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        z-index: 5
    }
 
  .timeline li {
    padding: 1em 0;
  }

  .timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .direction-l {
    position: relative;
    width: 47.4%;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 47.4%;
    float: right;
    text-align: left;
  }

  div{
    display: block;
  }

  .flag-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
  }

  .flag {
    position: relative;
    display: inline;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 26px;
    font-style: italic;
    font-weight: 600;
    text-align: left;
  }

  .flag a {
    color: inherit;
    text-decoration: none;
  }

  .flag a:hover {
    color: rgb(255, 80,80);
  }

  .direction-l .flag:before,
  .direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -45px;
    content: ' ';
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255,80,80);
    z-index: 10;
  }

  .direction-r .flag:before {
    left: -45px;
  }

  .direction-l .flag:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgb(248,248,248);
    border-width: 8px;
    pointer-events: none;
  }

  .direction-r .flag:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgb(248,248,248);
    border-width: 8px;
    pointer-events: none;
  }

  .time-wrapper {
    display: inline;
    line-height: 1em;
    font-size: 0.66666em;
    color: rgb(250,80,80);
    vertical-align: middle;
  }

  .direction-l .time-wrapper {
    float: left;
  }

  .direction-r .time-wrapper {
    float: right;
  }

  .time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248,248,248);
  }

 :global(body.dark) .time {
    background: rgb(250,80,80);
			color: var(--slate-100);
 }

  .desc {
      margin: 0.75em 0.75em 0 0;
			font-size: 1.5em;
			line-height: 1.5em;
  }

 :global(body.dark) .desc {
   color: var(--slate-300);
 }


  .direction-r .desc {
    margin: 1em 0 0 0.75em;
  }

  /* ================ Timeline Media Queries ================ */

 @media screen and (min-width: 660px) {

		 :global(body.dark) .direction-l .flag:after {
				 border-left-color: var(--slate-700);
		 }

		 :global(body.dark) .direction-r .flag:after {
				 border-right-color: var(--slate-700);
		 }

 }

  @media screen and (max-width: 660px) {

    .timeline {
      width: 100%;
      padding: 4em 0 1em 0;
    }

    .timeline li {
      padding: 2em 0;
    }

    .direction-l,
    .direction-r {
      float: none;
      width: 100%;
      text-align: center;
    }

    .flag-wrapper {
      text-align: center;
    }

    .flag {
      z-index: 15;
    }

    .direction-l .flag:before,
    .direction-r .flag:before {
      position: absolute;
      top: -30px;
      left: 50%;
      content: ' ';
      display: block;
      width: 12px;
      height: 12px;
      margin-left: -9px;
      background: #fff;
      border-radius: 10px;
      border: 4px solid rgb(255,80,80);
      z-index: 10;
    }

    .direction-l .flag:after,
    .direction-r .flag:after {
      content: "";
      position: absolute;
      left: 50%;
      top: -8px;
      height: 0;
      width: 0;
      margin-left: -8px;
      border: solid transparent;
			border-bottom-color: rgb(255,255,255);
			border-width: 8px;
      pointer-events: none;
    }

    :global(body.dark) .direction-l .flag:after,
    :global(body.dark) .direction-r .flag:after {
				border-bottom-color: var(--slate-700);
		}

    .time-wrapper {
      display: block;
      position: relative;
      margin: 4px 0 0 0;
      z-index: 14;
    }

    .direction-l .time-wrapper {
      float: none;
    }

    .direction-r .time-wrapper {
      float: none;
    }

    .desc {
      position: relative;
      margin: 1em 0 0 0;
      padding: 1em;
				background: rgb(245,245,245);
      box-shadow: 0 0 1px rgba(0,0,0,0.20);

      z-index: 15;
    }

			:global(body.dark) .desc {
					background: var(--slate-700);
			}

 
    .direction-l .desc,
    .direction-r .desc {
      position: relative;
      margin: 1em 1em 0 1em;
      padding: 1em;

      z-index: 15;
    }

  }

  @media screen and (min-width: 400px) and (max-width: 660px) {

    .direction-l .desc,
    .direction-r .desc {
      margin: 1em 4em 0 4em;
    }

			h1, .header-link { display: none;}



  }

 .options-wrapper {
		 display: flex;
		 justify-content: space-between;
		 items-align: center;
		 padding: .5em;
		 background: white;
		 position: fixed;
     width: 100%;
     z-index: 9999;
     margin: 0;
     top: 0;
 }


 :global(body.dark) .options-wrapper {
   background: var(--slate-800);
   color: var(--bg-color);
 }

 .date-filter {
		 padding:0 20px;
 }

 h1 {
		 font-size: 1em;
		 margin: 0;
 }

 .header-link {
		 text-decoration: none;
		 padding-right: 1em;
 }

 :global(body.dark) .header-link {
   color: var(--slate-200);
 }

 :global(body.dark) a {
		 color: var(--slate-200);
 }

 .flag a {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 430px;
   display: inline-block;
   line-height: 1;
 }