/* media queries, from narrow to wide */

@media all and (max-width: 1000px) {
  :root {
    --fs-0: 0.8rem;
    --fs-1: 1rem;
    --fs-2: 2rem;
    --fs-3: 3rem;
  }
  section {
    width: 90vw;
  }
  section:last-of-type {
    /* padding: 1rem 0 5vh 0; */
  }
  a:hover,
  a:active,
  li:hover {
    text-decoration: none;
  }
  .mobile-hidden {
    display: none;
  }
  .border-img {
    border: 0.5px #000 solid;
  }

  /* ------------ NAV -------------------- */
  .nav div a {
    padding: 0.3rem;
  }
  .nav-links:last-child::after {
    margin-left: 0;
  }

  /* ------------ MAIN PAGE -------------- */
  .hero-img {
    display: none;
  }
  /* 
  .hero ul li:hover + .hero-img {
    opacity: 0;
    } */

  /* ------------ ARCHIVE PAGE -------------- */
  .archive-sheet,
  .archive-top {
    margin-top: 10vh;
  }
  .archive-item {
    width: 49%;
    padding: 1rem;
  }
  .archive-item a div {
    display: none;
  }
  .archive-link {
    width: 78vw;
  }
  .archive-front-container {
    margin-top: -1rem;
  }
  .archive-front-top {
    -webkit-transform: perspective(40vw) rotateX(15deg) scale(0.991);
  }
  .archive-tag-container,
  .archive-tag-small,
  .archive-tag {
    /* max-height: 1.2rem; */
    min-width: 120px;
    max-width: 30%;
  }
  .archive-tag {
    /* height: 1.2rem; */
    max-height: 1.2rem;
    max-width: 30%;
    min-width: 120px;
  }
  .archive-tag-year {
    right: 0.6rem;
    top: 0.2rem;
    font-size: var(--fs-0);
  }
  .archive-tag-year .zero {
    font-size: var(--fs-0);
  }
  #archive-tag-container-2025 {
    justify-self: start;
  }
  #archive-item-container-2025 {
    width: 80vw !important;
  }
  #archive-tag-container-2024 {
    justify-self: start;
    margin-left: 15%;
  }
  #archive-item-container-2024 {
    width: 80vw !important;
  }
  .archive-link .archive-tag-container {
    transition: none;
  }
  .archive-link .archive-tag-container:hover .archive-tag,
  .archive-link .archive-tag-container:hover .archive-tag-small,
  .archive-link .archive-tag-container:hover .archive-tag-year,
  .archive-link .archive-tag-container:hover .archive-tag-year .zero,
  .archive-link .archive-tag-container:hover + .line {
    transform: none;
  }
  .archive-links-container {
    padding-bottom: 2rem;
  }

  /* ------------ ABOUT PAGE -------------- */
  .about-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .about-title {
    line-height: 1;
  }
  .about-text {
    max-width: 100%;
  }
  /* ------------ PROJECT ------------------ */
  .project-container {
    padding: 0;
    border: none;
    margin-top: 40vh;
  }
  .project-title {
    font-size: 15vw;
  }
  .project-parts,
  .project-concept {
    display: none;
  }
  .project-team {
    grid-column: 1;
    grid-row: 3;
    text-align: start;
  }
  .project-split-img {
    display: flex;
    flex-direction: column;
    gap: 10vh;
  }
  .constellation-panel-container {
    flex-direction: column;
    border-top: 1px solid black;
    padding-top: 10vh;
  }
  .canvas-wrapper {
    max-width: 80vw;
  }
  .constellation-panel-container h3 {
    display: block;
  }
  .constellation-panel-description h3 {
    display: none;
  }

  /* ------------ FOOTER ------------------ */

  footer {
    padding: 5vh 10vw 1rem 10vw;
  }
  footer a {
    font-size: var(--fs-0);
  }
  .license-icons img {
    width: var(--fs-0);
  }
}
@media only screen and (max-device-width: 1000px) {
  .archive-hero {
    padding-bottom: 12vh;
  }
  .about-container {
    padding-bottom: 12vh;
  }
}

@media all and (max-width: 700px) {
  /* ------------ 404 PAGE ---------------- */

  .not-found {
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding-bottom: 12vh;
    transform: translateY(0);
  }
  .not-found-title {
    font-weight: 500;
    font-size: 43.5vw;
    margin-bottom: -1rem;
    transform: translateX(-3px);
  }
  .not-found-container {
    margin: 0;
    border: none;
    padding: 1rem 0 0 0;
    border-top: 2px solid black;
    height: auto;
    width: 100%;
  }
  .not-found-text {
    padding-left: 0;
  }
}

@media all and (min-width: 500px) and (max-width: 999px) {
  /* ------------ ARCHIVE PAGE -------------- */

  .archive-sheet,
  .archive-item {
    width: 33%;
  }
}