/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

html {
  scroll-behavior: smooth;
}
body {
  background: #fff;
}
body.noscroll {
  overflow: hidden;
}

/* LAYOUT */
.content-wrapper {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 0;
  position: relative;
}

/* HEADER + FOOTER */
.main-header,
.main-footer {
  background: #fff;
  color: #000;
}

.header-title img,
.footer-title img {
  width: 450px;
  display: block;
}
.header-title,
.footer-title {
  margin-bottom: 20px;
  font-size: 0;
}

/* TEXT */
.practice-description {
  font-size: 22px;
  max-width: 600px;
  margin-bottom: 20px;
}
.contact-info p {
  font-size: 18px;
}
.auto-biography {
  font-size: 14px;
  max-width: 600px;
  margin: 20px 0;
}
.copyright {
  font-size: 12px;
}

/* HEADER SNAIL */
.header-snail {
  position: absolute;
  bottom: -5.4px;
  right: 0;
  font-size: 36px;
}
.header-snail a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.header-snail a:hover {
  color: #48cae4;
}
.header-snail a.moving {
  animation-name: snail-move;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
.header-snail a.paused {
  animation-play-state: paused;
}
@keyframes snail-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--snail-distance, -3500px));
  }
}

/* FOOTER LINK */
.footer-right-text {
  position: absolute;
  bottom: 110px;
  right: 0;
  font-size: 36px;
}
.footer-right-text a {
  color: #000;
  text-decoration: none;
}
.footer-right-text a:hover {
  color: #48cae4;
}

/* LIGHTBOX */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.lightbox-image-container {
  width: 80%;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  cursor: zoom-in;
}

.lightbox-image-container {
  width: 80%;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  cursor: zoom-in;
}

.lightbox-image-container.zoomed {
  cursor: zoom-out;
}

.lightbox-image-container.grabbing {
  cursor: grabbing !important;
}

.lightbox img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* PROJECT STYLES */
.project {
  color: white;
}
.project-description {
  max-width: 400px;
  margin-top: 40px;
  color: #000;
}
.project-description h2 {
  font-size: 22px;
  margin-bottom: 12px;
}
.project-description p {
  font-size: 14px;
  margin-bottom: 0;
}

/* PROJECT 1 */
#project1 {
  background: #6989c7;
}
#project1 .project-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}
#project1 img {
  width: 100%;
  display: block;
}

/* PROJECT 2 */
#project2 {
  background: #a4c3b2;
}
#project2 .project-images {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
}
#project2 img {
  width: 70%;
  display: block;
}

/* PROJECT 3 */
#project3 {
  background: #d52b1e;
}
#project3 .project-images {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
}
#project3 img {
  width: 80%;
  display: block;
}

/* PROJECT 4 */
#project4 {
  background: #fff;
}
#project4 .project-images img {
  width: 60%;
  display: block;
}

/* PROJECT 5 */
#project5 {
  background: #53b07f;
}
#project5 .project-images img {
  width: 100%;
  display: block;
  cursor: pointer;
}

/* =========================
   MOBILE / TABLET RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 40px 20px;
  }

  /* HEADER + FOOTER IMAGES */
  .header-title img,
  .footer-title img {
    width: 100%;
    max-width: 300px;
  }

  /* HEADER DESCRIPTION */
  .practice-description {
    font-size: 18px;
    max-width: 100%;
  }

  .contact-info p,
  .auto-biography {
    font-size: 16px;
  }

  .footer-right-text {
    font-size: 28px;
    bottom: 80px;
  }

  .header-snail {
    font-size: 28px;
    bottom: -4px;
  }

  #project1 .project-images,
  #project2 .project-images,
  #project3 .project-images,
  #project4 .project-images,
  #project5 .project-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  #project2 img,
  #project3 img,
  #project4 img {
    width: 100%;
  }

  .project-description {
    max-width: 100%;
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .practice-description {
    font-size: 16px;
  }

  .contact-info p,
  .auto-biography {
    font-size: 14px;
  }

  .project-description h2 {
    font-size: 18px;
  }

  .project-description p {
    font-size: 13px;
  }

  .header-snail {
    font-size: 24px;
  }

  .footer-right-text {
    font-size: 24px;
    bottom: 20px;
  }

  .content-wrapper {
    padding: 30px 15px;
  }
}