:root {
  --global_font: sans-serif;
}

html{
  scroll-behavior: smooth;
}

body {
  font-family: var(--global_font);
}

/*! Non-standardized*/
/** source: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar */
body::-webkit-scrollbar {
  display: none;
}

.reveal {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/** Used for inital hero section load: ->./script.js*/
@keyframes fadeIn {
  0% {
    gap: 50px;
    opacity: 0;
  }

  100% {
    gap: 0;
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 1s ease-out forwards;
  /** forwards keeps elements in final state*/
}


/*==========================*/
/*   MEDIA BREAKPOINTS      */
/*==========================*/
@media screen and (max-width: 768px) {
  #pinpicture {
    width: 12px;
    height: 12px;
  }

  #socials {
    flex-direction: column;
    align-items: center;
  }
}

/* Converts Project section from desktop to slider display*/
@media screen and (max-width: 840px) {
  .timeline{
    --line-x: 10%;
  }

  .jobPost{
    width: calc(100% - 14%);
    margin-left: 14%;
  }

   /* disable alternating sides on mobile */
   .timelineItem:nth-child(even) .jobPost,
   .timelineItem:nth-child(odd) .jobPost {
     margin-left: 14%;
     margin-right: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 15px;
   }
}