@font-face {
  font-family: 'mg'; 
  src: url('../fonts/EVA-Matisse_Standard.ttf') format('truetype');
}
body {
  font-family: 'mg', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: rgb(231, 231, 231);
} 
ul {
  list-style: none;
}
a {
  text-decoration: none; 
  color: inherit; 
}
h1 {
  font-size: clamp(1.5rem, 2vw, 3rem);
  margin: 100px auto 20px;
  padding: 100px 0 0 0;
  text-align: center;
  color: var(--secondary-color);
  z-index: 990;

}
h2 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin: 0 auto 0;
  padding: 10px;
  text-align: center;
  color: var(--secondary-color);
  line-height: 1;
}

h3 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin: 0 auto 0;
  text-align: center;
  color: var(--secondary-color);
  line-height: 0;
}


:root {
  --primary-color: #2b2b2b; /* Change to your desired primary color */
  --secondary-color: #8f1301; /* Change to your desired secondary color */
  --background-color: #ffffff; /* Change to your desired background color */
  --p-color: #454545;
  --text-color-dark: rgb(231, 231, 231);
}

.homepage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  background: rgb(231, 231, 231); /* Match your page background */
  border-bottom: 3px solid #2b2b2b; /* Only bottom border */
  width: 100%; /* Full width */
}
.homepage ul li a {
  font-size: clamp(0.5rem, 7vw, 3rem); /* Adjust the value as needed */
  line-height: 2;
  align-self: flex-end;
  margin-left: 20px; /* Adjusted to match container */

}
.logo {
  width: 70px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 5px;
  margin-right: 10px; /* Adjusted to match container */
  transition: filter 0.4s;
}
.logo img {
  border: #000000 3px dotted;
}

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

/* NavBar */
.navbar {
  position: fixed;
  top: 0; /* Height of .homepage; adjust as needed */
  z-index: 999;
  left: 5px; /* Adjusted to match container */
  padding-top: clamp(50px, 2vh + 88px, 240px);
  padding-bottom: clamp(10px, 15px, 20px) ; /* Adjust padding as needed */
  width: clamp(50px, 9.5%, 500px); /* Responsive width */

  height: (100px, 1vh, 1000px);
  border-radius: 10px;
}
.main-menu-index {
  position: fixed;
  top: 140px; /* adjust vertical position as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: clamp(160px, 25%, 1000px); /* responsive width */
  height: auto;
  border-radius: 30px;
  padding: 20px;
  margin: 0;
  background-image: linear-gradient(to bottom, rgb(154, 16, 16), rgb(92, 5, 5));
  border: #484848 5px solid;

}


.navbar ul li {
    font-size: clamp(0.5rem, 1vw, 3rem);
   
}

/* center the links inside the menu */

.main-menu-index ul li {
  margin: 15px 40px;
  text-align: center;
  background-color: rgb(231, 231, 231);
    border: #000000 3px solid;

  border-radius: 10px;
padding: 10px 0;

}

.main-menu-index ul li a {
  font-size: 1.5rem; /* larger, responsive font for main-menu-index */
}
.main-menu-index .fa-square-arrow-up-right {
  font-size: 1.25rem;

}

/* hover effect */
.homepage ul li a:hover {
    color: var(--secondary-color);
    

}

.navbar ul li a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}
.logo img:hover {
   filter: invert(100%);
   
}

.image:hover {
  filter: invert(70%);
  transition: filter 0.4s;
  
}

.box {
  max-width: 3750px;
  margin: 0 10px;
  padding: 0 0;
}


/* works-homepage */
.grid {
  columns: 3 400px;
  column-gap: 4rem;
  width: clamp(100px, 100%, 200%); /* Responsive width */
  gap: 20px; /* Space between grid items */
  max-height: none;
  position: relative;
  padding: 45px 0px 0 115px;
}

.block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%; /* Adjusted to match container */
}

.image {
  width: 100%;
  display: block;
  margin-bottom: 1rem;
  object-fit: contain;
  border-radius: 10px;
}

.caption {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: var(--secondary-color);
  text-align: center;
  padding: 6px 12px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  font-size: 2rem;
  width: 90%;
}

.block:hover .caption,
.block:focus-within .caption {
  opacity: 100%;
    transition: filter 0.3s;
}

.main-layout {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;         /* Space between navbar and grid */
  margin: 0 10px;
}

.contact {
  display: flex;
  line-height: 1;
  list-style: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px auto 0;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  font-size: clamp(0.5rem, 3vw, 2rem);
  width: 100%;
  position: absolute;
  z-index: 998;
  top: 100px;
  left: 10px;
  line-height: 2;
}

.external li a {
 background-color: #2b2b2b; /* Match your primary color */
  color: white;
  text-decoration: underline;
  padding: 10px;
  font-size: clamp(0.2rem, 3vw, 1.5rem);
  display: inline-block;
  margin: 15px auto 15px;
  width: 100%;
  border-radius: 10px;  
  transition: filter 0.3s;
}
.external li a:hover {
  filter: invert(100%);
}

i {
  margin-right: 5px; /* Space between icon and text */
  color: #8f1301;
  font-size: clamp(0.5rem, 3vw, 2rem);
}

.fa-square-arrow-up-right {
  font-size: clamp(0.75rem, 1vw, 1rem);

}




hr {
  width: 30%;
  height: 3px;
  background-color: var(--secondary-color); /* Match your primary color */
  border: none;
  margin: 0 auto 30px; /* Adjust spacing as needed */
}


.container {
  overflow: hidden;
  width: 120%;
  margin: 0;
background: none;
max-height: none;
}

.bricks {
  display: flex;
flex-direction: column;  
width: 120%;
 margin-left: -100px;
  height: 100%;
}

.brick {
  width: 100%;
  height: 100vh;
  margin: 0 -50px;


}

.brick__image {
  position: relative;
  width: 300px; 
  margin: -50px 0 -20px 0px;
  border-radius: 10px;

}

#trigger {
  display: block;
  height: 300px;
  width: 100%;
  background: none;
}

.design {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 120px auto 0 ;
  padding: 20px;
  width: 100%;
}

p {
  font-size: clamp(0.5rem, 3vw, 1rem);
  text-align: flex-start;
  color: var(--p-color);
  margin: 10px auto;
  line-height: 0.9;
}

.bio {
display: flex;
line-height: 1;
list-style: none;
flex-direction: column;
  align-items: center;
  left: 0;
  width: 100%;
  position: relative;
  z-index: 998;
  top: 100px;
  line-height: 2;
}

.description {
  display: flex;
  justify-content: center;
  margin: 0;
  width: 1000px;
  max-height: none;
  column-gap: 100px;
  margin: 0;
}

h4 {
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  margin: 0 0 0;
  text-align: center;
  color: var(--primary-color);
  line-height: 1.5;
}

h5 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-decoration: underline ;
  margin: 0 auto 10px;
  text-align: center;
  color: var(--secondary-color);
  line-height: 1;

}

.experience {
width: 100%;

}

.about {
width: 100%;
  }

.skills {
width: 100%;
  }

h6 {
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  text-align: flex-start;
  color: var(--primary-color);
  line-height: 1;
}


.grid-image-3D {
  columns: 2 400px;
  column-gap: 4rem;
  width: clamp(100px, 100%, 200%); /* Responsive width */
  gap: 20px; /* Space between grid items */
  max-height: none;
  position: relative;
  padding: 45px 0px 0 115px; /* Adjusted to match container */
  
}

.block-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%; /* Adjusted to match container */
  
  
}

.block-image:hover .caption,
.block-image:focus-within .caption {
  opacity: 100%;
    transition: filter 0.3s;
}

.misc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.bang {
  filter: saturate(200%);
  filter: grayscale(100%);
}

.bang:hover {
  filter: invert(100%);
}


/*Hamburger button*/

.hamburger-button {
  background: none;
  border:none;
  cursor: pointer;
  padding: 15px 10px 0;
  z-index: 1002;
  display: none;
}

.hamburger-button .hamburger-line {
  width: 25px;
  height: 3px;
  background: var(--primary-color);
  margin: 4px 2px;
  z-index: 2000;
  position: relative;
  top: -10px;
  left: -10px;
}

.grid-image-3D p {
  color: var(--text-color-dark);
  
}

.mobile-menu {
  position: fixed;
  top: 0; /* Height of .homepage; adjust as needed */
  z-index: 1002;
  left: -300px; 
  padding-top: clamp(10px, 2vw + 90px, 190px);
  padding-bottom: 12px; /* Adjust padding as needed */
  padding-left: 55px;
  width: 190px; /* Responsive width */
  background-color: var(--background-color);
  max-height: 500px;
  min-height: 100px;
  border-radius: 10px;
  transition: left 0.5s ease-in-out;
}

.mobile-menu.active{
    left: 0px; 

}


.bio-mobile{
  display: none;
  position:relative;
  top: 120px;
  padding: 0 100px;
}

.bio-mobile hr {
  width: 100%;
}

/*Media Queries*/

@media (max-width:960px){
  
}


@media (max-width:670px){
 .main-menu-index{
  display: none;
 }
  .navbar .main-menu{
    display: none;
  }
  .navbar .hamburger-button{
    display: block;
  }
.bio-mobile {
  display: block;
}
.bio {
  display: none;
  
}

h6{
  text-align: center;
}
.fa-square-xmark{
  font-size: 1.5rem;
  padding: 20px 0;
  text-align: center;
}
h5{
  text-align: center;
}
.grid {
  columns: 1 300px;
  column-gap: 1rem;
  width: 100%; /* Responsive width */
  gap: 0; /* Space between grid items */
  max-height: none;
  top: 30px;
  position: relative;
  padding: 0;

}
.block {
 position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  max-width: 100%;
}

.grid-image-3D {
  columns: 1 300px;
  column-gap: 1rem;
  width: 100%; /* Responsive width */
  gap: 0; /* Space between grid items */
  max-height: none;
  top: 40px;
  position: relative;
  padding: 0;

}
.block-image {
 position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  max-width: 100%;
}

.mobile-menu a {
  font-size: 1rem;
}
h1{
  margin: 100px  10px;
}







.container {
  overflow: hidden;
  width: 100%;
  margin: 0px 0 0 0;
background: none;
max-height: none;
}

.bricks {
  display: flex;
flex-direction: column;  
width: 100%;
  height: 100%;
}

.brick {
  width: 100%;
  height: 100vh;
  margin: 0 0px;
}

.brick__image {
  position: relative;
  width: 100px; 
  margin: -10px 0 -20px 0px;
  border-radius: 10px;

}
}





@media (max-width:500px){
  
  .navbar .main-menu{
    display: none;
  }
  .navbar .hamburger-button{
    display: block;
  }
.bio-mobile {
  display: block;

}
.bio {
  display: none;
  
}

h6{
  text-align: center;
}
.fa-square-xmark{
  font-size: 1.5rem;
  padding: 20px 0;
  text-align: center;
}
h5{
  text-align: center;
}


.grid {
  columns: 1 300px;
  column-gap: 1rem;
  width: 100%; /* Responsive width */
  gap: 0; /* Space between grid items */
  max-height: none;
  top: 30px;
  position: relative;
  padding: 0;

}
.block {
 position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  max-width: 100%;
}

.grid-image-3D {
  columns: 1 300px;
  column-gap: 1rem;
  width: 100%; /* Responsive width */
  gap: 0; /* Space between grid items */
  max-height: none;
  top: 30px;
  position: relative;
  padding: 0;

}
.block-image {
 position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  max-width: 100%;
}
.mobile-menu a {
  font-size: 1rem;
}

h1{
  margin: 100px  10px;
}


.container {
  overflow: hidden;
  width: 120vw;
  margin: 0px 0 0 0;
background: none;
max-height: none;}

.bricks {
  display: flex;
flex-direction: column;  
width: 120%;
  height: 100%;
  margin-left: -60px;
}

.brick {
  width: 100%;
  height: 100vh;
  margin: 0 0px;
}

.brick__image {
  position: relative;
  width: 100px; 
  margin: -10px 0 -20px 0px;
  border-radius: 10px;

}
}


/* Center slideshow container in the viewport */
.slideshow-container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw); /* responsive: up to 900px or 90% of viewport */
  max-width: 750px;
  z-index: 995;
  display: block;
  padding: 0;
  overflow: visible; /* allow larger yt-placeholder to extend beyond container */
}
.slideshow-container h3 {
  margin-top: 0 0 20px;
  padding-top: 10px;
}
.slide { display: none; }
/* make slide images fill the slideshow container (images stay inside container) */
.slide img { width: 100%; height: auto; border-radius: 10px; display:block; margin: 0 auto; }
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(143,19,1,1);
  color: #fff;
  padding: 10px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  z-index: 1000;
  transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.prev { left: -100px; } .next { right: -100px; }

/* Hover state */
.prev:hover, .next:hover {
  filter: invert(90%); /* accent color */
  transform: translateY(-50%) scale(1.1);
}


.dot { display:inline-block;
   width:30px; 
   height:30px; 
   border-radius: 3px; 
   background: rgba(23, 23, 23, 0.8);  
   cursor:pointer; 
  margin: 25px 12px 0px;
  }
  .dot:hover {
transition: 0.2s;
  transform: scale(1.5);
  border-radius: 3px; /* or 50% if you want circular */
 
  }
.dot.active {
  background: url('../images/star 1 copy 2.jpeg') center/cover no-repeat;
  transform: scale(1.5);
  border-radius: 3px; /* or 50% if you want circular */
  background-color: transparent; /* override color */

}
/* Make YouTube placeholder larger than images and center it */
.yt-placeholder {
  /* make it larger than slideshow container but centered */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 110%); /* up to 1100px or 130% of container width */
  max-width: none;
  background: #000;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.yt-placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Make slideshow responsive on small screens */
@media (max-width: 900px) {
    .recent-page .slideshow-container {
    margin-top: -120px !important; /* make more negative to raise more */
  }
  .slideshow-container { 
width: 95vw;
  top: -20%;}
  /* reduce youtube oversize on small screens */
  .yt-placeholder { width: 105%; }
}

/* Page-specific spacing for RECENT.html */
.recent-page h3 {
  margin-bottom: 1.75rem; /* extra gap under the heading */
}

@media (max-width: 900px) {
  .recent-page h3 { margin-bottom: 2rem; }
  .recent-page .slideshow-container { top: calc(58% + 30px); }
  .dot.active {
  background: rgba(143,19,1,1);
  transform: scale(1.2);
  border-radius: 3px; /* or 50% if you want circular */
}
}

/* ensure container defines the height */
.slideshow-container {
  --slideshow-height: clamp(300px, 65%, 600px);
  height: var(--slideshow-height);
  overflow: visible; /* keep if you want yt to overflow slightly */
}

/* slide fills container */
.slide {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* images fill and crop to match height */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* use contain if you don't want cropping */
  background: black;
}

/* make YouTube placeholder exactly the same size */
.yt-placeholder {
  width: 100% !important;
  height: 100% !important;
  left: 0;
  transform: none;
  aspect-ratio: auto; /* remove fixed 16/9 if present */
}
.yt-placeholder iframe {
  width: 100%;
  height: 100%;
}