/**
sass --watch stylesheets:css
*/
html {
  scroll-behavior: smooth; }

* {
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: "Cabin", sans-serif;
  overflow-x: hidden; }

.title {
  position: relative;
  background-image: url("/img/me.jpeg");
  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .title h1 {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 74px; }
  .title .tagline {
    font-family: "Ubuntu Mono", monospace;
    font-weight: 400;
    color: #FF9800; }
  .title .resume {
    text-decoration: none;
    background: #FF9800;
    position: absolute;
    bottom: 32px;
    left: 32px;
    text-align: center;
    margin: 8px;
    font-size: 14px;
    color: black;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 4px 8px; }
  .title .arrow {
    position: absolute;
    color: #fff;
    text-decoration: none;
    font-size: 56px;
    bottom: 56px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    animation: shaker 1s infinite alternate; }

.projects {
  display: flex;
  height: 100vh; }
  .projects .project-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: #5B6770; }
    .projects .project-list .project-item {
      padding: 16px;
      position: relative;
      display: flex;
      flex-basis: calc(100% / 3);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
      cursor: pointer;
      z-index: 0;
      height: calc(100% / 2); }
      .projects .project-list .project-item * {
        user-select: none;
        transition: all 1s ease-in-out; }
      .projects .project-list .project-item h4 {
        font-weight: 500;
        font-size: 32px;
        text-align: center;
        margin: 0 0 24px;
        padding: 0; }
      .projects .project-list .project-item img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: -1;
        opacity: 0;
        mix-blend-mode: lighten; }
      .projects .project-list .project-item p {
        max-height: 0;
        overflow: hidden;
        margin: 0 56px;
        text-align: center; }
      .projects .project-list .project-item .download {
        color: #FF9800;
        font-size: 14px;
        font-family: "Ubuntu Mono", monospace;
        text-decoration: none; }
      .projects .project-list .project-item ul {
        list-style: none;
        padding: 0;
        margin: 24px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; }
        .projects .project-list .project-item ul li {
          text-align: center;
          margin: 8px;
          font-size: 12px;
          background: rgba(0, 0, 0, 0.2);
          text-transform: uppercase;
          border-radius: 8px;
          padding: 4px 8px; }
      .projects .project-list .project-item .trophy {
        position: absolute;
        top: 32px;
        right: 32px;
        color: #f39c12;
        font-size: 28px; }
      .projects .project-list .project-item.details h4 {
        transition: all 1s; }
      .projects .project-list .project-item.details img {
        opacity: 0.2; }
      .projects .project-list .project-item.details p {
        max-height: 100%; }

.timeline {
  background-color: #466380;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh; }
  .timeline ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; }
    .timeline ul li {
      position: relative;
      padding: 24px 64px;
      width: 440px;
      border-top: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      text-align: center;
      height: 200px; }
      .timeline ul li::before {
        position: absolute;
        content: '';
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #fff;
        top: -8px;
        left: calc(50% - 8px); }
      .timeline ul li time {
        position: absolute;
        top: -48px;
        width: 200px;
        left: calc(50% - 200px / 2);
        text-align: center; }
      .timeline ul li h4 {
        margin: 10px 0 2px;
        font-size: 18px; }
      .timeline ul li h5 {
        margin: 0;
        font-size: 14px;
        font-weight: 500; }
      .timeline ul li p {
        margin: 10px 0;
        font-size: 12px;
        opacity: 0; }
      .timeline ul li * {
        transition: all 1s ease-in-out; }
      .timeline ul li:hover h4 {
        font-size: 24px; }
      .timeline ul li:hover h5 {
        font-size: 18px; }
      .timeline ul li:hover p {
        font-size: 14px;
        opacity: 1; }

.contact {
  padding: 36px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #5B6770;
  /* pop-up text arrow */
  /* text pops up when icon is in hover state */ }
  .contact a {
    margin: 64px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-family: fontawesome;
    font-size: 52px;
    padding: 64px;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 28px;
    margin: 0 2px;
    transition: all .5s;
    line-height: 0; }
  .contact img {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 196px;
    animation: hide 4s ease-in-out infinite alternate; }
  .contact a:hover {
    transform: scale(1.5) translateY(2px); }
  .contact a span {
    color: #000;
    position: absolute;
    font-family: "Ubuntu Mono", monospace;
    font-weight: 100;
    bottom: 0;
    left: -25px;
    right: -25px;
    padding: 5px 7px;
    margin: 26px;
    z-index: -1;
    font-size: 9px;
    border-radius: 8px;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    line-height: initial; }
  .contact a span:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    position: absolute;
    bottom: -5px;
    left: 40px; }
  .contact a:hover span {
    bottom: 80px;
    visibility: visible;
    opacity: 1; }

@keyframes shaker {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-14px); } }
@keyframes hide {
  0% {
    transform: translateX(-32px); }
  100% {
    transform: translateX(0); } }
@media screen and (max-width: 1024px) {
  .projects {
    display: flex;
    flex-direction: row; }

  .timeline {
    height: auto; }
    .timeline ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 32px 0; }
      .timeline ul li {
        border: 0;
        padding: 0 64px;
        margin: 32px 64px;
        height: auto; }
        .timeline ul li::before {
          display: none; }
        .timeline ul li p {
          margin: 10px 0;
          font-size: 12px;
          opacity: 1; }
        .timeline ul li time {
          position: static; }

  .contact {
    flex-direction: column; } }
@media screen and (max-width: 768px) {
  .projects {
    height: auto;
    display: flex;
    flex-direction: column; }
    .projects .project-list {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center; }
      .projects .project-list .project-item {
        height: auto;
        padding: 64px 32px; }
        .projects .project-list .project-item h4 {
          font-weight: 500;
          font-size: 18px;
          text-align: center;
          margin: 0 0 24px;
          padding: 0; }

  .timeline {
    height: auto; }
    .timeline ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 32px 0; }
      .timeline ul li {
        border: 0;
        padding: 0 64px;
        margin: 32px 64px;
        height: auto; }
        .timeline ul li::before {
          display: none; }
        .timeline ul li p {
          margin: 10px 0;
          font-size: 12px;
          opacity: 1; }
        .timeline ul li time {
          position: static; } }

/*# sourceMappingURL=index.css.map */