@import "base"


.timeline
  display: flex
  flex-direction: column
  height: auto
  color: $light
  align-items: center
  justify-content: center
  margin-bottom: 5%
  margin-top: 8vh

  .header
    margin-bottom: 2%
    font-family: $title-stack
    font-size: 4em


  #timeline
    max-width: 800px
    margin: 0 auto
    margin-bottom: 2%
    position: relative

    ul
      list-style: none

      li
        border: 8px solid $gray
        padding: 20px
        color: white
        border-radius: 10px
        margin-bottom: 20px

        &:last-child
          margin-bottom: 0
      
        .content

          h1
            font-family: $subtitle-stack
            font-weight: bold
            font-size: 25px
            line-height: 30px
            margin-bottom: 10px
          
          h2
            font-family: $subtitle-stack
            font-weight: bold
            font-size: 20px
            line-height: 30px
          
          p
            font-family: $body-stack
            font-weight: normal
            font-size: 16px
            line-height: 30px

          .date
            font-family: monospace
            font-weight: normal
            font-size: 12px
            margin-bottom: 10px
            letter-spacing: 2px

    @include desktop
      &:before 
        content: ""
        position: absolute
        top: 0
        left: 50%
        transform: translateX(-50%)
        width: 2px
        height: 100%
        background-color: $light

      .date
        position: absolute
        top: -30px
      
      ul li
        width: 50%
        position: relative
        margin-bottom: 50px

        &:nth-child(odd)
          float: left
          clear: right
          transform: translateX(-30px)
          border-radius: 20px 0px 20px 20px

          &::before
            transform: translate(50%, -50%)
            right: -38px

        &:nth-child(even)
          float: right
          clear: left
          transform: translateX(30px)
          border-radius: 0px 20px 20px 20px
        
          &::before
            transform: translate(-50%, -50%)
            left: -38px

        &::before
          content: ""
          position: absolute
          height: 20px
          width: 20px
          border-radius: 50%
          background-color: $gray
          top: 0