/* =========================================
   TABLET (<= 1024px)
   stack layout
   ========================================= */

@media (max-width: 1024px) {

  main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
  }

  /* intro becomes top section */
  section#intro {
    position: static !important;
    top: 0;
    left: 0;
    width: 100vw;
    margin-top: 40px;
  }

  section#main_page {
    margin-left: 0;
    width: 95%;
  }

  header nav {
    width: 50%;
  }

  .project,
  .experience {
    width: 100%;
  }

  .carousel {
    max-width: 100%;
  }

  p#long_desc {
    width: 100%;
  }

  section#main_page h2 {
    font-size: 3em;
  }
}


@media (max-width: 768px) {

  main {
    padding: 0 12px;
    width: 100%;
  }

  /* intro full width */
  section#intro {
    width: 100%;
    max-width: 100%;
    padding: 15px;
  }

  section#intro img.intro_img {
    height: 140px;
  }

  /* nav smaller */
  header nav {
    width: 60%;
    padding: 6px;
    position: relative;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
  }

  /* headings scale */
  section#main_page h1 span:nth-child(2),
  section#main_page h1 span:nth-child(3) {
    font-size: 1.7em;
  }

  section#main_page h2 {
    font-size: 2em;
  }

  /* cards stack vertically */
  .project,
  .experience {
    flex-direction: column;
    width: 100%;
    padding: 15px;
    gap: 10px;
  }

  .projectPreview,
  .experiencePreview {
    width: 100%;
    height: 160px;
  }

  img.link {
    position: static;
    align-self: flex-end;
  }

  /* tech stack full width */
  .carousel {
    max-width: 100%;
  }

  .group img {
    height: 70px;
  }

  /* paragraph width fix */
  p#long_desc {
    width: 100%;
    font-size: 0.95em;
  }

  body {
    background-size: cover;
    background-position: center;
  }
}