/* font families
  font-family: 'Pathway Gothic One', sans-serif;
*/

@basecolor: black;
@link: #3181FF;

@prezicolor: #3181ff;
@coandcocolor: red;
@personalcolor: @basecolor;
@teachingcolor: gray;
@studiescolor: blue;

@basepadding: 5px;

@breakpoint1: 500px;
@numberofyears: 36;
@numberoffullyears: 16;

.basefont {
  font-family: 'Pathway Gothic One', sans-serif;
  font-weight: 400;
  color: @basecolor;
}

.displayfont {
  font-family: 'Pathway Gothic One', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  color: @basecolor;
}

html {
  padding: 0;
}

body {
  .basefont;
  font-size: @basepadding * 3;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: @link;
  display: inline-block;
  margin-top: -3px;
}

/* HEADER */

header, footer {
  text-align: center;
  position: absolute;
  width: 100%;
  display: block;
  padding-top: @basepadding * 4;
  box-sizing: border-box;

  h1 {
    .displayfont;
    font-size: 36px;
    margin-bottom: 0px;
    display: block;
    font-size: 50px;
  }

  h2, h3 {
    .basefont;
    font-size: 18px;
    display: block;

    @media only screen and (max-device-width : 500px) {
      padding-left: 10vw;
      padding-right: 10vw;
    }
  }

  p {
    top: 40vh;
    position: absolute;
    width: 100%;
    .basefont;
    font-size: 32px;
    display: block;
    box-sizing: border-box;

    @media only screen and (max-device-width : 500px) {
      font-size: 24px;
      padding: 20vw;
      top: 30vh;
    }

  }

}

/* TIMELINE */

timeline {

    width: 100vw;
    height: 100vh;
    display: block;
    bottom: 0vh;
    overflow: visible;
    position: absolute;
    height: (100vh * @numberoffullyears) + (50vh * (@numberofyears - @numberoffullyears + 1));
    top: 35vh;

    .line {
      display: block;
      position: absolute;
      width: 0.5vw;
      height: (100vh * @numberoffullyears) + (50vh * (@numberofyears - @numberoffullyears + 1) - 25vh);
      left: 9.5vw;
      top: 0;
      background: @basecolor;
      background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 3%, rgba(0,0,0,1) 99%, rgba(0,0,0,0) 100%);
      background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 3%, rgba(0,0,0,1) 99%, rgba(0,0,0,0) 100%);
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 3%, rgba(0,0,0,1) 99%, rgba(0,0,0,0) 100%);
    }

    .yearmarkers {
      position: absolute;
      top: 0;
      left: 0;

      year {
        height: 100vh;
        width: 100vw;
        display: block;
        position: absolute;
        background: rgba(0,0,0,0.1);
        box-sizing: border-box;

        &:nth-child(odd) {
          background: rgba(0,0,0,0);
        }
        .yearloop(@counter) when (@counter > 0) {
          .yearloop((@counter - 1));
          &:nth-child(@{counter}) {
            top: 100vh * (@counter - 1) - 50vh;
            left: 0;
            z-index: 100-@counter;
            & when (@counter > @numberoffullyears + 1) {
              top: 100vh * @numberoffullyears + 50vw * (@counter - @numberoffullyears) - 50vh;
              height: 50vh;
              width: 100vw;
              left: 0;
            }
            &:after {
              @actualyear: 2018 - @counter + 1;
              content: "@{actualyear}";
            }
          }
        }

        .yearloop(@numberofyears);

        &:after {
          .displayfont;
          display: block;
          position: absolute;
          font-size: 4vw;
          bottom: auto;
          top: 1.8vw;
          left: 1.8vw;
          z-index: 15;
        }

        /* REFERENCES */

        reference {
          display: block;
          position: absolute;
          box-sizing: border-box;
          width: 40vw;
          margin-left: 12vw;
          background: white;
          box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
          border-radius: 3px;

          /* WHERE TO PUT THEM */

          &.odd-0 {
          }

          &.odd-1 {
            width: 40vw;
            margin-left: 54vw;
          }

          .monthloop(@counter) when (@counter > 0) {
            .monthloop((@counter - 1));
            &.offset-@{counter} {
              margin-top: (100vh / 12) * (12 - @counter);
            }
          }

          .monthloop(12);

          date {
            background: @basecolor;
            display: block;
            color: white;
            box-sizing: border-box;
            font-size: 12px;
            padding-left: @basepadding * 4;
            padding-right: @basepadding * 4;
            padding-top: @basepadding;
            padding-bottom: @basepadding;
            border-radius: 3px 3px 0 0;

            @media only screen and (max-device-width : 500px) {
              padding-left: @basepadding * 3;
            }
          }

          &.prezi {
            date {
              background: @prezicolor;
            }
          }

          &.personal {
            date {
              background: @personalcolor;
            }
          }

          &.coandco {
            date {
              background: @coandcocolor;
            }
          }

          &.studies {
            date {
              background: @studiescolor;
            }
          }

          &.teaching {
            date {
              background: @teachingcolor;
            }
          }

          /* REFERENCE STYLES */

          img {
            width: @basepadding * 24;
            height: auto;
            float: right;
            margin-right: @basepadding * 4;
            margin-top: @basepadding * 4;
            margin-left: @basepadding * 2;
            margin-bottom: @basepadding * 4;

            @media only screen and (max-device-width : 500px) {
              display: none;
            }
          }

          h3 {
            .displayfont;
            margin-top: 0.7em;
            margin-bottom: 0.7em;
            font-size: 24px;
            padding-left: @basepadding * 4;
            padding-right: @basepadding * 2;

            @media only screen and (max-device-width : 500px) {
              font-size: 18px;
              padding-left: @basepadding * 3;
            }
          }

          p {
            font-size: 15px;
            padding-left: @basepadding * 4;
            padding-right: @basepadding * 2;

            @media only screen and (max-device-width : 500px) {
              font-size: 12px;
              padding-left: @basepadding * 3;
            }

          }

          &.important-2 {
            width: 82vw;
            margin-left: 12vw;

            h3 {
              font-size: 32px;
              @media only screen and (max-device-width : 500px) {
                font-size: 24px;
              }
            }

            p {
              font-size: 24px;
              @media only screen and (max-device-width : 500px) {
                font-size: 18px;
              }
            }

            img {
              width: @basepadding * 50;

              @media only screen and (max-device-width : 500px) {
                display: auto;
              }
            }
          }

        }
      }
    }

}

/* LIGHTBOX */

lightbox {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
  padding: @basepadding*4;
	z-index: 999;
  background: white;

  &:target {
    display: block;
  }

  h2 {
    .displayfont;
    font-size: 36px;
    margin-bottom: 0px;
    display: block;
    font-size: 50px;
  }

  p {
    font-size: @basepadding * 3;
    .basefont;
    font-size: 18px;
    display: block;
  }

}