/* Color Scheme
  Off-White: #F2F2F2
  Off-Black: #262626
  White: #FFFFFF
  Black: #0D0D0D
  Rose: #755555

  Font Family: Franklin Gothic

*/

/* OVERARCHING SECTIONS */
header, section, footer, aside, nav, main, article, figure, img {
  display: block;
}

*{
  box-sizing: border-box;
  margin:0;
  padding:0;
  
}

body{
  background-color:#E8E8E8;
}
#wrapper{
  margin-left:15%;
  margin-right:15%; 
  margin-top: 30px;
  font-family:calibri,Arial, sans-serif;
}


h1{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  letter-spacing: 6px;
  font-size:50px;
}
h2{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  font-size:25px;
}

/* HEADING & Navigation */
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:70px;
  width:100%;
  margin-top:0;
  padding:15px 25px;
  margin-bottom:0px;
  
}
.header_border{
  height:5px;
  width:100%;
  margin-top:-25px;
  margin-bottom:20px;
}
.logo a{
  color: #6e6e6e;
  text-decoration: none;
  font-stretch: condensed;
  font-size: 25px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  transition: color 0.3s ease;
}
.logo a:hover{
  color:#D08686;
  transition: color 0.3s ease;
  
}
.nav_links{
  display:flex;
  justify-content: space-between;
}
.menu li{
  display:inline;
}
.menu a{
  color:#6e6e6e;
  text-decoration:none;
  margin-left:25px;
  transition: color 0.3s ease;
  
}
.menu a:hover{
  color:#D08686;
  text-decoration:underline;
  text-underline-offset: 7px;
  transition: color 0.2s ease;
  font-weight: 700;
}


/*GALLERY*/
.gallery{
  
  display: grid;
  grid-template-columns: repeat(3, 250px);
  gap: 30px;
  justify-content: center;
}

.gallery_item{
    background-color: white;
    padding:10px;
    border-radius: 20px;
    height: 250px;
    width:250px;
    overflow: hidden;
    position:relative;
}




@media (max-width: 1050px) {
  .gallery {
    grid-template-columns: repeat(2, 250px);
  }
}

@media (max-width: 700px) {
  .gallery {
    grid-template-columns: repeat(1, 250px);
  }
}

.gallery_container {
  width: 100%;
}

.year_section{
    display:flex;
    align-items:stretch;
    gap:40px;
    margin-bottom:40px;
}

.year_marker{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:60px;
}

.year_marker span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 20px 0;
}

.year_line{
    width:1px;
    background-color:#C8C8C8;
    flex-grow:1;
}

/*ABOUT*/
.main_container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about_container{
    display: block;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 20px;
    width: 80%;
    max-width: 900px;
    min-width: 300px;
    height: fit-content;
    padding:20px;
    color:#404040;
  
}
.contact a{
  text-decoration: none;
  color:#404040;
  transition: color 0.3s;

}

.contact a:hover{
  color:#D08686;
  transition: color 0.3s;
}

.modal{
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:100%;
    height:100%;

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

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.modal.show{
    opacity:1;
    visibility:visible;
}

.modal_content{
    max-width:90%;
    max-height:90%;
    border-radius:10px;

    transform:scale(0.95);
    transition:transform 0.3s ease;
}

.modal.show .modal_content{
    transform:scale(1);
}

#modalCaption {
  color: white;
  font-size: 1rem;
  z-index: 1001;
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.close{
    position:absolute;
    top:20px;
    right:35px;
    color:white;
    font-size:40px;
    cursor:pointer;
}


/* GALLERY HOVER OVERLAY */
.gallery_item {
  background-color: white;
  padding: 10px;
  border-radius: 20px;
  height: 250px;
  width: 250px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.image_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
}

.image_wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.image_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay_caption {
  color: white;
  font-size: 0.95rem;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

.image_wrapper:hover .image_overlay {
  opacity: 1;
}

.image_wrapper:hover img {
  transform: scale(1.03);
}
/* FOOTER */
footer{
  height:100px;
  margin-top:0;
  margin-right:2.5%;
  background-color: #E8E8E8;
  color:#6e6e6e;
  padding-top:20px;
  padding-left:10px;
  font-family:  'Arial Narrow', Arial, sans-serif;
  font-weight: normal;
  font-stretch: ultra-condensed;
  font-size:15px;
  text-align: right;
  font-family:calibri,Arial, sans-serif;
}