/* Change font for the entire webpage */
html, body {
  font-family: monospace, sans-serif;
  margin: 0px;
}

/* HOMEPAGE HEADER */
#mainLogo {
  padding-left: 20px;            /* Removes default list indentation */
  margin: 0px;             /* Removes default list spacing */
}


#stickyHeader{
  position: sticky;   /* keeps this block pinned once it hits the top of the viewport */
  top: 0;
  z-index: 100;       /* stays above the hero image and page content while scrolling */
}

#anchorTitle{
  display:flex;
  background-color: rgb(255, 255, 255); /* solid background so content scrolling underneath doesn't show through */
  padding: 0px;
}
 
/* Change font for specific headings */
h1 {
  font-family: Gill Sans, sans-serif;
  font-weight: 800;
  scale: 1.2;
  padding-left: 40px;  
  padding-top: 10px;          
  margin: 0px;            
  white-space: nowrap; /* this makes sure stuff never breaks into 2 lines*/
  transform: translateY(5px);
  /*background-color:rgb(255, 255, 255)*/
}

#subTitle{
  padding-left: 55%;
  padding-top: 0px;
  padding-bottom:0px;
  font-weight: 100;
  white-space: nowrap; /* this makes sure stuff never breaks into 2 lines*/
}

.anchorBar {
  display: flex;
  /* Optional: adds spacing so items do not hug the bars tightly */
  gap: 0px; 
  background-color: rgb(220, 220, 220);
  padding-top: 0px;
  padding-bottom: 0px;
  overflow-x: auto;        /* Enables horizontal scrolling when content overflows */
  overflow-y: hidden;      /* Hides vertical scrolling */
  white-space: nowrap;     /* Prevents items from wrapping to a new line */
  position: sticky;   /* keeps this block pinned once it hits the top of the viewport */
}

.anchorBarItem {
  border-right: 1px solid black;
  align-self: stretch;
  padding-top: 10px;
  padding-bottom: 10px;
}

.anchorBarItem a { /* The link component of the item */
  display: block;    /* turns the link into a full box instead of just wrapping its text */
  height: 100%;       /* stretches to fill the li's full height, including the padding area */
  offset-position: 0px;
  margin-top: -30px;
  padding-top: 30px;
  margin-bottom: -30px;
  padding-bottom: 30px;
  margin-left: -50px;
  padding-left: 50px;
  margin-right: -50px;
  padding-right: 50px;
}

/* Removes the black bar from the final item */
.anchorBarItem:last-child {
  border-right: none;
}

.anchorBarItem:hover {
  font-weight: 800;
  background-color:rgb(200, 200, 200)
  }

ul{
  list-style: none;      /* Removes the default bullet points */
  padding-top: 10px;            /* Removes default list indentation */
  padding-bottom: 10px;
  margin: 0px;             /* Removes default list spacing */
  gap: 40px;             /* Adds space between the list items */
  font-size: larger;
}

li{
  list-style-type: none;
  padding-top: 0px;
  padding-left: 50px;
  padding-right: 50px;
}
/* HOMEPAGE HEADER */


/* homepage image or video */
.lobby-image {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    width: 100%;     /* let the grid column control width, not a fixed pixel value */
    overflow: hidden;
    padding-right:0px;
    background-color: white;
}

.lobby-video {
    display:flex;
    align-content: center;
    margin-right: 40px;
    margin-left: 75px;
    margin-top: 40px;
    margin-bottom: 100px;
    flex-shrink: 0;         /* stops items from shrinking to fit — this is the key line */
    overflow-x: hidden;       
    overflow-y: hidden;
  }
  
  .lobby-video iframe {
    width: 500px;
    height: 300px;
    border: none;
    padding-left:0px;
  }

  
  .videoImage{
    max-height: 300px;
    max-width:fit-content;
    align-self:center ;
  }

  
  #videoImageRotate{
    animation: spin 2s linear infinite;
    transform-origin: center; /* or "top center" if you want it to wave like a flag/pendant hanging from the top */
  }

  @keyframes spin {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(15deg); }
    75%  { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
  }

#sectionName{
    font-weight: 100;
    white-space: nowrap; /* this makes sure stuff never breaks into 2 lines*/
    scale:2.5;
    padding: 30px;
}

/* homepage image or video */

.black-bar{
  height: 1px; /* Adjust thickness as needed */
  background-color: #000000; /* Pure black */
  width: 100%; /* Spans the full width */
  margin: 0px; /* Space above and below the bar */
}

.black-wall{
  height: fill; /* Adjust thickness as needed */
  background-color: #000000; /* Pure black */
  width: 1px; /* Spans the full width */
  margin: 0px; /* Space above and below the bar */
  color:#00000000;
}

h2{
  padding: 20px;            /* Removes default list indentation */
  margin: 20px;             /* Removes default list spacing */
}

.year{
  font-weight: 100;
  margin:0px;
  padding-left:75px;
  padding-top: 20px;
  padding-bottom: 0px;
  background-color: rgb(220, 220, 220);
  overflow-x: hidden; /* Stops horizontal side-scrolling */
}

.subCategory{ /*so far only used in Programming.html*/
  margin-top: 0x;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-left:75px;
  padding-top: 0px;
  padding-bottom:0px;
  font-weight: 100;
  background-color: rgb(220, 220, 220);
}

.description{
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: 40px;
  margin-right:40px;
  padding-left: 0px;
  line-height: 28px;
  max-width: 25%;
  white-space: wrap;
  /*border: 2px solid red;*/
  }

/*_____________________v PORTFOLIO ITEMS HERE v______________________*/
.workRow{
  display:flex;
  flex-shrink: 0;         /* stops items from shrinking to fit — this is the key line */
  overflow-x: auto;       
  overflow-y: hidden;
  white-space: nowrap;
  background-color: white;
  /*_____________________ SCROLL WHEEL color settings______________________*/
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgb(220,220,220) rgb(255, 255, 255, 0%);
}

#workRow{
  height:400px;
}

/*_____________________v SCROLL WHEEL v______________________*/
.work-row::-webkit-scrollbar {
  height: 12px;
}

.work-row::-webkit-scrollbar-track {
  background: rgb(220, 220, 220);
  border-radius: 10px;
}

.work-row::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}

.work-row::-webkit-scrollbar-thumb:hover {
  background: rgb(60, 60, 60);
}
/*_____________________^ SCROLL WHEEL ^______________________*/

/*_____________________V SCROLL BUTTON V______________________*/
.work-row-wrapper {
  position: relative;   /* this is the key line — it anchors the buttons below */
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* centers vertically regardless of row height */
  background: rgb(220, 220, 220);
  color: black;
  border: none;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;                    /* keeps buttons above the images, not hidden behind them */
  border-radius: 0%;
  opacity: 0.75;
  height:100%;
}

.scroll-btn:hover {
  opacity: 1;
}

.scroll-left {
  left: 0px;
}

.scroll-right {
  right: 0px;
}
/*_____________________^ SCROLL BUTTON ^______________________*/

.projectDivider{
display:flex; 
gap:0px;
margin:0px;
padding:0px;
width:1400px;
}

/*.sideImage{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}*/

.projectSection{
padding:0px;
margin-bottom:100px;
}

#projectTitle{
margin-left:0px;
margin-right:40%;
margin-bottom:20px;
margin-top:20px;
padding-left:75px;
padding-top:20px;
padding-bottom:0px;
font-weight: 100;
/*background: linear-gradient(to right, rgb(220, 220, 220, 100%),rgb(220, 220, 220, 90%), rgba(220, 220, 220, 0));*/
}


.featured-item-section{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 3 equal columns */
  gap: 10px;                            /* Adds spacing between items */
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: 75px;
  width: 50%;
}

.featured-item-section img{
  width: 100%;                          /* Forces image to fill cell width */
  object-fit: cover;                    /* Crops nicely without stretching */
  aspect-ratio: 1 / 1; /* Makes the height always match the shrinking width */
}


/*___V VIDEO SECTION V___*/
.featured-item-section-video{
  display: grid;
  grid-template-columns: repeat(1, 1fr); 
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: 75px;
  width: 50%;
}

.featured-item-section-video img{
  width: 100%;                         
  object-fit: cover;                   
  aspect-ratio: 1 / 1; 
}
/*___^ VIDEO SECION ^___*/



.portfolio-item{
  width: 100%;
  height: 225px;
  position: relative;   /* this line is the key to letting the overlay work on each grid image */
  overflow: hidden;
  border: 0.5px solid black;
  aspect-ratio: 1 / 1; /* Makes the height always match the shrinking width */
}

.portfolio-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/*___V VIDEO ITEM V___*/
/* Specifically for Single Videos instead of grid (started working on this in the marketing page)*/
.portfolio-item-video{
  display:flex;
  width: 100%;
  height: 460px;
  border: 0.5px solid black;
  aspect-ratio: 1 / 1; /* Makes the height always match the shrinking width */
  position: relative;   /* this is the missing piece — anchors the overlay here specifically */
  overflow: hidden;
}

.portfolio-item-video img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/*___^ VIDEO ITEM ^___*/




.item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);   /* fully transparent by default */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                      /* invisible until hovered */
  transition: all 0.3s ease;       /* smooth fade in/out */
  pointer-events: none;   /* lets clicks pass through to the image underneath */
}

.portfolio-item:hover .item-overlay {
  background: rgba(255, 255, 255, 0.8);  /* darkens on hover */
  opacity: 1;
  width: 100%;
  height: 100%;
}

.portfolio-item-video:hover .item-overlay {
  background: rgba(255, 255, 255, 0.8);  /* darkens on hover */
  opacity: 1;
  width: 100%;
  height: 100%;
}

.program-thumbnail:hover .item-overlay {
  background: rgba(255, 255, 255, 0.8);  /* darkens on hover */
  opacity: 1;
  width: 100%;
  height: 100%;
}

.item-title {
  color: black;
  font-size: 1.4rem;
  text-align: center;
  padding: 10px;
  font-weight: 100;
}
/*__________________^ PORTFOLIO ITEMS HERE ^__________________*/

p{
  font-size: larger;
  padding-left: 20px;            /* Removes default list indentation */
  margin: 20px;             /* Removes default list spacing */
}


footer{
  display:flex;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: rgb(220, 220, 220)
}

#contactMe{
  padding-top: 40px;
  line-height: 28px;
}
#contactMe2{
  padding-top: 40px;
  line-height: 28px;
}

/*CLICKABLE IMAGES FUNCTION, Lightboxes*/
.hidden {
  display: none;
}

#lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.90);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox.hidden {
  display: none;   /* now wins over #lightbox's display: flex */
}

#lightbox-content {
  display:flex;
  gap: 30px;
  max-width: 100%;
  max-height: 100%;
  align-items: center;
  line-height: 28px;
}

#lightbox-img {
  max-height: 85vh;
  max-width: 60vw;
  object-fit: contain;
}

#lightbox-caption {
  color: black;
  font-size: 1.2rem;
  max-width: 400px;
}

#lightbox-close {
  position: absolute;
  top: 50px; right: 120px;
  color: white;
  font-size:larger;
  scale: 2;
  cursor: pointer;
  border: 0.5px solid black;
  padding-left: 10px;
  padding-right: 10px;
  background-color: black;
}

.gapMaker{
  height: 100px; /* Adjust thickness as needed */
  background-color: rgb(255, 255, 255, 0.0);
  width: 100%; /* Spans the full width */
  margin: 0px; /* Space above and below the bar */
}

/*cilckable arrows for multi stack*/
#lightbox-prev, #lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: black;
  font-size: 5rem;
  cursor: pointer;
  padding: 10px 20px;
  user-select: none; /* prevents the arrow text from being selected/highlighted on click */
}

#lightbox-prev {
  left: 20px;
  padding-top: 100px;
}

#lightbox-next {
  right: 20px;
  padding-top: 100px;
}

#lightbox-youtube{
  position: relative;
  width: 1200px;
  height: 675px;  
}

/*CLICKABLE IMAGES FUNCTION, Lightboxes*/



/* Collapsible Button*/
.collapsible-card {
  background: rgb(220, 220, 220);
  border-bottom: 1px solid black;
  border-radius: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-top: 10px;
  max-width: 100%;
}

/* Clickable heading styling */
.collapsible-card summary {
  cursor: pointer;
  outline: none;
  margin-top:-59px;
  padding-left: 75px;
  padding-top:70px
}

/* Optional hover state */
.collapsible-card summary:hover {
  font-weight:bold;
  border-top: 1px solid black;;

      /* 1. Define the gradient with a steep angle */
      background: linear-gradient(0deg, rgb(160,160,160), white, rgb(160,160,160), white);
  
      /* 2. Scale up the background so parts of it are hidden */
      background-size: 400% 400%;
      
      /* 3. Apply an infinite, smooth loop animation */
      animation: gradientShift 1s ease-out;
  
      /* Optional sizing properties
      width: 100%;
      height: 100vh;*/
}

/* Styling applied ONLY when the block is expanded */
.collapsible-card[open] {
  border-color: none;
}

.collapsible-card .content {
  padding-top: 10px;
  margin-top: 10px;
}

/*summary animation*/
summary {
  list-style: none;        /* removes default marker in Firefox/most browsers */
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;            /* removes default marker specifically in Chrome/Safari */
}

summary::before {
  content: ">";              /* your custom arrow/pointer character */
  font-size: xx-large;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 10px;
  transition: transform 0.5s ease;
}

details[open] summary::before {
  transform: rotate(90deg);  /* rotates ▶ to point downward when expanded */
}



/*Animated Gradient Option*/

/* 4. Shift the background positions to reveal different colors */
@keyframes gradientShift {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}
/*Animated Gradient Option*/


/*Programming.HTML Main Project thumnail stuff*/
.program-thumbnail-background{
  background-color: white;
  display:flex;
}

.program-thumbnail{
  width: 75%;
  position:relative;
}

.program-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/*Programming.HTML Main Project thumnail stuff*/


/* Overlay GIF stuff */
#pageContent {
  position: relative;   /* this is the anchor point the gif locks onto */
}

#gifOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the whole page height/width, cropping if needed */
  pointer-events: none;    /* lets clicks/hovers pass through to your actual content underneath */
  z-index: 110;             /* above your regular content, but below the sticky header and lightbox */
}
/*^ Overlay GIF stuff ^*/


/*click animation*/
.click-splatter {
  position: absolute;
  width: 360px;
  height: 360px;
  pointer-events: none;   /* so the splatter itself never blocks the next click underneath it */
  z-index: 9999;           /* sits above everything, including your paint-drip overlay */
}
/*click animation*/