* {
  
   /*background-color: #e3e3e3;*/
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
   /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif, 'Baskerville';
    font-size: clamp(11px, 5vw, 15px);*/

  scroll-behavior: smooth;
}

.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .Nimbus-Sans-Bold{
  font-family: "nimbus-sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.Nimbus-Sans-Regular{
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.Surce-Sns-Missing-TypesLight{
  font-family: "surce-sns-missing-types", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.nav {
    height: 80px;
    justify-content: space-between;
    align-items: center;
    padding: 0rem calc((100vw - 1300px) / 2);
    
}
.logo {
    /*margin-top: -7%;*/
    background-color: transparent;
}
.logo a {
    background-color: transparent;
    /*margin: auto;*/
    letter-spacing: -3px;
    font-family: "nimbus-sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(40px, 5vw, 30px);
    color: #353935;
    /*padding: auto;*/

}
nav a {
  background-color: transparent;
  text-decoration: none;
  color: #353935;
  padding: 0 1.6rem;
  }
  .nav-items {
    font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
      padding-top: 15px;
      display: grid;
      padding: auto;
      /*margin-right: -20px;*/
      background-color: transparent;
  }
  .navbar {
   z-index: 10;
   background-color: transparent; 
     position: fixed;
     top: 20px;
     /*bottom: 75px;*/
     width: 100%;
     padding-bottom: 15px;
  }
.socials a {
  background-color: transparent;
text-decoration: none;
color: #353935;
padding: 0 1.6rem;

/*padding: 0 1rem;*/
}


.socials {
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: transparent;
    overflow: hidden;
    align-items: center;
    position: fixed;
  bottom: 20px;
  justify-content: space-between;
  z-index: 10;
}

nav a, .logo a, .socials a {
  text-decoration: none;
  color: #353935;
  transition: color 0.3s ease;
  background-color: transparent;
}

/* Hover effect */
nav a:hover,
.logo a:hover,
.socials a:hover {
  color: grey; /* Change this color if you'd like something else */
}
/*.statement {
  max-width: 400px;
  padding: 40px;
  color: white;
  font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
}*/


.hat, .grail, .tall, .rec, .end, .dad, .paint {
  width: auto;
  height: auto;
  object-fit: contain;
}
.hat { max-width: 500px; }
.grail { max-width: 800px; }
.dad { max-width: 450px; }
.tall { max-width: 500px; }
.rec { max-width: 700px; }
.end { max-width: 700px; }
.paint { max-width: 550px; }

img {
  width: 150px;
  -webkit-filter: drop-shadow(3.5px 3.5px 3.5px #222);
  filter: drop-shadow(3.5px 3.5px 3.5px #222);
}
.wrapper {
  display: flex;
  align-items: center;
  height: auto;
   /*background-color: #9966CC;*/
}
.content {
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(11px, 5vw, 15px);
   background-color: transparent;
  width: 300px;
  height: 300px;
  padding-left: 25px;
  padding-right: 40px;
}
/*#content {
     background-color:#9966CC;
}*/
.container {
    
  margin-top: -90px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 70vw;
  height: 900px;
  white-space: nowrap;
  flex-wrap: nowrap;
  gap: 20px;
  padding-left: 200px;
  column-gap: 500px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.container img {
    
  flex: 0 0 auto;
  margin: 10px;
  scroll-snap-align: center;
}
.container::-webkit-scrollbar {
  display: none;
}



/*.fullpage {
  background-color: transparent;
  z-index: 10;
  height: 200vh; 
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}*/

/*.linebar {
  outline-style: solid;
  outline-width: 0.1px;
  outline-color: #353935;
  width: 100%;
  margin: auto;
  padding: 0;
  margin-top: 15px;
  position: relative;
  z-index: 10;
}*/
.linebar {
  outline-style: solid;
  outline-width: 0.1px;
  outline-color: #353935;
  width: 100%;              /* Reduced width for centering effect */
  margin: 10px auto 0;     /* Top margin, auto left/right */
  padding: 0;
  position: relative;
  z-index: 10;
}

.overlay-gallery {

  overflow: hidden;
  display: flex;
  flex-direction: column;
  /*width: 100%;*/
}

.overlay-gallery {
  height: 100vh;
  width: 93vw;
  scroll-snap-align: start;
  
  top: 0;
   background-color: none;
    scroll-snap-align: start;
 
   box-sizing: border-box;
   position: relative;
   z-index: 5;
}

.statement-section {
  height: 100vh;
  width:100vw;
  
}
.section-two{
  position: fixed;
  z-index: 10;
}
.statement-section {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #97ad3b;
  padding: 20px;
position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*background-image: url("Grail_Cropped.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  height: 100vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;*/
}

.statement {
 
 /* margin-top: 200px;*/
   font-family: 'Baskervville';
   font-size: clamp(20px, 5vw, 40px);
   font-style: italic;
  max-width: 900px;
  line-height: 1.6;
   color: white;
   /*text-shadow: 1px 1px gray;*/
   background-color: transparent;
}

.names {
  font-family: 'Baskervville';
   font-size: clamp(20px, 5vw, 35px);
   padding: 5px;
   align-items: center;
   justify-content: center;
   text-align: center;
}
/*.overlay-gallery {
  position: sticky;
  top: 0;
background-color: #97ad3b;
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}*/

.scroll {
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  position:absolute;
  bottom: 20px;
  right: 40px;
  background-color: transparent;
   
  color: #353935;
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  z-index: 1000;
}

/* Hide on screens smaller than ~600px (typical phone width) */
@media screen and (max-width: 600px) {
  .scroll {
    display: none;
  }
}

.scroll.hidden {
  opacity: 0;
}






/* Initial hidden state for all elements (fade in)*/
.overlay-gallery{
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.overlay-gallery.visible {
  opacity: 1;
}





/* Target smaller screens like iPhone and adjust layout */
@media only screen and (max-width: 600px) {
  .container img {
    width: 300px; /* On smaller screens, make each image take up 100% of the width */
    height: auto;
    object-fit: contain;
  }

  /* Adjust the layout for a more compact gallery */
  .container {
    display:flexbox; /* Stack images vertically on small screens */
    
  }
}