.color1 { background-color: #f78a8a; }

.color2 { background-color: #f7a66a; }

.color3 { background-color: #fbe98a; }

.color4 { background-color: #b1d59a; }

.color5 { background-color: #75c1a5; }

.color6 { background-color: #8ba4bb; }

.color7 { background-color: #6ca7c5; }

.color8 { background-color: #8a7abe; }



html {

  overflow-y: scroll;

}



body {

  background-color: #f8f9fa;

  color: #333;

  padding: 20px;

  font-family: Arial, sans-serif;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



.container {

  max-width: 1440px;

  min-width: 340px;

  margin: 0 auto;

  padding: 0 20px;

}



.header-container {

  max-width: 1440px;

  margin: 0 auto;

}



header {

  position: relative;

  text-align: center;

  height: 150px;

  padding: 25px 0 0 0;

}



header h1 {

  font-size: 3em;

  margin-bottom: 5px;

}



header p {

  font-size: 1.2em;

  color: #665;

}



.nav-links {

  position: absolute;

  bottom: 10px;

  left: 0;

  display: flex;

  gap: 15px;

  padding-left: 20px;

}



.nav-links a, .mobile-bottom-links a {

  text-decoration: none;

  font-size: 0.95em;

  font-family: 'Trebuchet MS', sans-serif;

  font-weight: bold;

  color: #333;

  padding: 5px 10px;

  border-radius: 4px;

  transition: background-color 0.3s;

}



.nav-links .active, .mobile-bottom-links .active {

  font-size: 0.95em;

  font-family: 'Trebuchet MS', sans-serif;

  font-weight: bold;

  color: #777;

  background-color: #eeeeee; 

  padding: 5px 10px;

  border-radius: 4px;

  pointer-events: none;

  cursor: default; 

}



.nav-links a:hover, .mobile-bottom-links a:hover {

  background-color: #ddd;

  /* transform: translateY(-2px); */

}



.box-links {

  position: absolute;

  bottom: 10px;

  right: 20px;

  display: flex;

  gap: 10px;

}



.btn {

  width: 35px;

  height: 35px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 4px;

  background: #333;

  text-decoration: none;

  transition: background 0.2s ease, transform 0.1s ease;

}



.btn:hover {

  transform: translateY(-2px);

}



.btn:active {

  transform: translateY(0);

}



.btn svg {

  width: 25px;

  height: 25px;

  fill: #f8f9fa;

  transition: fill 0.3s ease;

}



footer {

  text-align: center;

  margin-top: 60px;

  font-size: 0.9em;

  color: #999;

}



.gallery {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 20px;

  margin: 25px auto 0 auto;

  justify-items: center;

  max-width: calc((350px * 4) + (20px * 3)); /* max width for 4 columns + gaps */

}



.gallery-width-limiter {

  max-width: 400px;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.gallery-box {

  width: 100%;

  aspect-ratio: 5 / 6;

  border-radius: 4px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease;

  overflow: hidden;

  position: relative;

}



.gallery-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  /*image-rendering: crisp-edges;*/

}



.gallery-box:hover {

  transform: scale(1.02);

  /* outline: 1px solid #7e7e7e; */

  /* box-shadow: 0 8px 20px rgba(0,0,0,0.2); */

}



.gallery-box::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,0);

  transition: background-color 0.3s ease;

  pointer-events: none;

}



.gallery-box:hover::after {

  background-color: rgba(0,0,0,0.1);

}



a.gallery-link {

  text-decoration: none;

  display: inline-block;

  width: 100%;

}



.mobile-bottom-links {

  display: none;

} 



/* PROJECT OVERVIEW ------------------------------------------- */

.project-overview-wrapper {

  position: relative;

  margin: 25px auto 0 auto;

  padding: 16px 14px 10px 14px;

}



.project-overview-wrapper::before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: min(1360px, 100%);

  height: 1px;

  background: #bbb;

}



.project-overview-wrapper .label-tag {

  position: absolute;

  top: -0.55em;

  left: 50%;

  transform: translateX(-50%);

  background: #f8f9fa;

  padding: 0 10px;

  font-size: 0.65rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: #aaa;

  white-space: nowrap;

  z-index: 1;

}



.project-overview {

  max-width: 1360px;

  margin: 0 auto;

  font-size: 0.8rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: #777;

  line-height: 1.6;

  text-align: justify;

}



/*767px*/

@media (max-width: 714px) {

  header h1 {

    font-size: 2.5em; 

  }



  header p {

    font-size: 1em;

  }



  .box-links {

    display: none;

  }



  .nav-links {

    position: static;

    justify-content: center;

    padding-left: 0;

    margin-top: 10px;

  }



  .mobile-bottom-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: #fff;

    border-top: 1px solid #ddd;

    padding: 10px 0;

    z-index: 1000;

    min-width: 320px;

  }



  /* Extra bottom padding so footer isn't hidden */

  body {

    padding-bottom: 70px; 

  }

}