@font-face { font-family: GROUPE; src: url('fonts/groupemedium-8mxgn.otf'); } 
@font-face { font-family: Gorgone; src: url('fonts/Gorgonedemo-YzaOL.otf'); } 
@font-face { font-family: RobotoThin; src: url('fonts/Roboto-Thin.ttf'); }
@font-face { font-family: Roboto; src: url('fonts/Roboto-Regular.ttf'); }
@font-face { font-family: RobotoBold; src: url('fonts/Roboto-Bold.ttf'); }
body {
background-image: url('img/website_back2.png');
background-size: cover;
background-position: center center;
background-repeat:repeat-y;
background-attachment: fixed;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll issues */
}
#grad1 {
  background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,255,255,1));
}
#grad2 {
  background-image: radial-gradient(farthest-corner at 50% 45%, rgba(255,255,255,1)20%, rgba(255,0,0,0)90%)
}
h1{
  color: rgb(79, 79, 79);
  font-family: GROUPE,sans-serif;
  font-size: 75px;
  text-shadow:  4px 2px 2px rgba(70, 70, 70, 0.5);
}

@media (max-width: 768px) {
  .sticky-header {
    height: auto; /* Allow the height to adjust dynamically */
    padding: 10px;
  }
  .sticky-header h1 {
    font-size: 1.5em;
  }
  .nav-buttons {
    flex-wrap: wrap; /* Allow buttons to wrap if needed */
    gap: 10px;
  }
  .nav-buttons button {
    font-size: 0.8em;
    padding: 5px;
  }
  h1{
    font-size: 50px;
    text-shadow:  1px 1px 2px rgba(70, 70, 70, 0.5);
}
.work_sep{
  font-size: 30px;
}

div{
  font-size: 10px;
}
.school {
  font-size: 15px;
}
.degree{
  font-size: 15px;
}
.internal-toc{
  font-size: 30px;
}
.pinned-button{
  font-size: 5vw;

}
}
div{
  font-family: RobotoThin;
  font-size: 30px;

}
table {
width: 100%;
table-layout:auto;
}
#headgap {
height: 175px; /* Initially matches the header height */
transition: height 0.3s ease; /* Smooth transition */
}
/* Styles for the header sides */
.header_side {
width: 30%;
text-align: center;
}
#about div{
    display: inline-block;
    
}
#about #inside{
    position: relative;
    display: flex; /* Enables flexbox layout */
    align-items: flex-start; /* Aligns items at the top */
    justify-content:center; /* Adds space between the two items */
    gap: 20px; /* Optional: spacing between `.info` and `.about-slideshow-container` */
    margin: 20px 0; /* Optional: adds margin around the wrapper */
}
[hidden] {
    display: none !important; /* Ensure hidden elements are truly removed */
}
.info{
  width: 40%;
    border: 5px solid rgba(0, 0, 0, 0.5); /* Subtle border */
    border-radius: 10px; /* Rounded corners for softness */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    background-color: rgba(189, 211, 252, 0.5); /* Optional: background color */
    color: rgb(34,34,34);
}
/* Middle column for the title and navigation */
.header_middle {
max-width: fit-content;
text-align: center;
display: inline-block;
}
.sticky-header{
    position: fixed;
    flex-direction: column; /* Stack title and navigation vertically */
    top: 0;
    left: 0;
    width: 100%;
    color: rgb(69, 67, 67);
    align-items: center;
    text-align: center;
    margin-top: 0px;
    padding: 0px;
    z-index: 1000; /* Keeps the header on top of other content */
}

.sticky-header nav {
    flex-grow: 1;
    
}
.sticky-header h1{
      margin-bottom: 5px; /* Reduce the space below the title */
  }

.nav-buttons {
      margin-top: 0; /* Remove any default top margin from the nav */
      padding-top: 0; 
      list-style: none; /* Remove default list styles */
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center; /* Horizontally center the buttons */
      align-items: center; /* Vertically center the buttons */
      gap: 25px; /* Add spacing between buttons */
      height: 100%; /* Ensure it fills the header's height */
  }

  .nav-buttons li {
      display: flex; /* Ensure items align within their flex parent */
      justify-content: center;
      align-items: center;
  }

.nav-buttons button {
    font-family: GROUPE, sans-serif;
    font-size: 16px;
    background-color: transparent; /* Transparent background to match design */
    color: rgb(69, 69, 69); /* Button text color */
    border: none; /* Remove default button border */
    cursor: pointer; /* Change cursor to pointer */
    transition: color 0.3s ease; /* Smooth hover transition */
    padding: 5px 10px; /* Add some padding for better click area */
    text-shadow:  1px 1px 2px rgba(96, 72, 72, 0.5);

}

.nav-buttons button:hover {
    color: rgb(69, 64, 95); /* Change color on hover */
    text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); /* Soft shadow on hover */

}

@keyframes fade-out {
    from {
      opacity: 100%;
    }
    to {
      opacity: 0%;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0%;
    }
    to {
      opacity: 100%;
    }
  }

/*---------------------FOOTER-----------------------------------------------------------*/
.footer-container a svg {
    width: 24px;
    height: 24px;
}
.footer-container a:hover svg {
    fill: #45405f;
}

.footer-container {
    display: flex;  
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: linear-gradient(145deg, rgb(202,202,202,0.8), rgba(164,183,194,0.8)); /* Subtle gradient for a 3D look */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* Soft shadow around the footer */
    border-radius: 12px; /* Rounded corners for a smoother look */
    position: relative; /* Ensures it looks like an overlay */
    margin: 20px 16px;
  }

  .footer-container a {
    color: #f5f6f7;
    text-decoration: none;
    font-family: GROUPE;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Slight shadow for text depth */
  }

  .footer-container ul {
    display: flex;
    gap: 24px;
    list-style-type: none;
    padding: 0;
    justify-content: center;
    margin: 10px 0;
  }

  .footer-container ul li {
    transition: transform 0.2s, box-shadow 0.2s; /* Add hover effects for interactivity */
  }

  .footer-container ul li svg path:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
  }

  .footer-container p {
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
  }


/*-----------------------------SLIDE SHOWWWWW------------------------------------------------------------------------*/
.about-slideshow-container {
    position: relative;
    overflow: hidden; /* Ensures content stays within bounds */
    width:40%;
    border: 5px solid rgba(0, 0, 0, 0.5); /* Subtle border */
    border-radius: 10px; /* Rounded corners for softness */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    background-color: rgba(189, 211, 252, 1); /* Optional: background color */
}

.about-slides {
    display: none;
    width: 100%;
    height: 100%;
}

.about-active {
    display: block;
}

.about-prev, .about-next {
    cursor: pointer;
    position: absolute; /* Use absolute positioning to align relative to the container */
    top: 50%; /* Align arrows vertically in the center */
    transform: translateY(-50%); /* Adjust for proper centering */
    width: auto;
    padding: 12px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 50%; /* Optional: Make arrows circular */
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 2; /* Ensure arrows are above the slides */
}

.about-prev {
    left: 10px; /* Position near the left edge */
}

.about-next {
    right: 10px; /* Position near the right edge */
}

/* Add hover effects for better interactivity */
.exp-prev:hover, .exp-next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
    color: #f1f1f1; /* Slightly brighter text color */
}

.exp-slideshow-container {
  position: relative;
  overflow: hidden; /* Ensures content stays within bounds */
  max-width: 80%;
  border: 5px solid rgba(0, 0, 0, 0.5); /* Subtle border */
  border-radius: 10px; /* Rounded corners for softness */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
  background-color: rgba(189, 211, 252, 1); /* Optional: background color */
  margin: 20px auto; /* Center within the .img div */
}

.exp-slides {
  display: none;
  width: 100%;
  height: auto;
}

.exp-active {
  display: block;
}

.exp-prev, .exp-next {
  cursor: pointer;
  position: absolute; /* Use absolute positioning to align relative to the container */
  top: 50%; /* Align arrows vertically in the center */
  transform: translateY(-50%); /* Adjust for proper centering */
  width: auto;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 50%; /* Optional: Make arrows circular */
  user-select: none;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 2; /* Ensure arrows are above the slides */
}

.exp-prev {
  left: 10px; /* Position near the left edge */
}

.exp-next {
  right: 10px; /* Position near the right edge */
}

/* Add hover effects for better interactivity */
.exp-prev:hover, .exp-next:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
  color: #f1f1f1; /* Slightly brighter text color */
}
/*------------------------------------------------------------------------------------------------------*/
#education {
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#experience {
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#skills {
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#lib {
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Individual school block */
.school {
  scroll-margin-top: 175px; /* Adjust this value based on your header height */
  display: grid;
  grid-template-columns: 1.5fr 2fr 1.5fr;
  grid-template-rows: auto auto;
  gap: 15px;
  align-items: center;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shelf {
  display: grid;
  gap: 15px;
  left: 10px;
  background-color: rgb(255,255,255);
  border: 1px solid rgb(221,221,221);
  border-radius: 8px;
  padding: 15px;
  text-align: left; /* Aligns content to the left */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-size: 1em;
  font-family: Roboto;
  color: #387fb9;
  grid-template-columns: 1fr; /* One column grid */
}
.shelf audio {
  width: 30%; /* Makes the audio element take up full width of its container */
  height: 1em; /* Sets the height of the audio player to match text size */
  margin-top: 5px; /* Adds a bit of space above the audio element */
}

.shelf a {
  color: #387fb9; /* Makes the link color match the text color */
  text-decoration: none; /* Removes underline from links */
}

.shelf a:hover {
  text-decoration: underline; /* Adds underline on hover for links */
}
.shelf .level {
  font-size: 1.2em;
  font-family: Roboto;
  font-weight: bold;
  color: #387fb9;
  text-align: center; /* Centers the level text */
  grid-column: 1 / -1; /* Make the level span across the entire grid */
}


/* Content Styling */
.school .level {
  font-size: 1.2em;
  font-family: Roboto;
  font-weight: bold;
  color: #387fb9;
}

.school .timeperiod {
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: rgb(42, 77, 105);
}
.school .degree {
  font-family: Roboto;
}
.school .name {
  font-size: 1em;
  font-family: Roboto;
  color: #346083;
  font-weight: bold;
  margin: 5px 0;
}

.school .location {
  font-family: Roboto;
  font-size: 0.9em;
  color: #777;
}
.school .location svg {
  width: 30px; /* Adjust the size of the SVG */
  height: 30px;
  fill: #777; /* Default color of the icon */
  transition: fill 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

/* Hover effect: change SVG color and scale */
.school .location:hover svg {
  fill: #777; /* Change color on hover */
  transform: scale(1.1); /* Enlarge the icon slightly */
}
/* Image Section */
.school .img {
  grid-column: span 3; /* Make image span full width in a block */
  text-align: center;
}
.school .file{
  grid-column: span 3; /* Make image span full width in a block */
  text-align: center;

}
.school .file embed{
    width: 100%;
  aspect-ratio: 4 / 3;
}
.school .fileButton button{
  color: rgb(69, 69, 69);
  font-size: 0.7em;
  padding: 0;
  border: none;
  background: none;
}
.school .fileButton button:hover {
  cursor: pointer;
}
.school .img img {
  max-width: 80%;
  object-fit: cover;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.school .img figcaption {
  margin-top: 5px;
  font-size: 0.8em;
  color: #888;
}
.work_sep div{
  font-family: GROUPE;
  text-align: center;
  font-size: 1em;
  color:rgb(69, 69, 69) ;
}
/*----------------------------------------------------------------------------------------------------------*/
.internal-toc {
  font-family: GROUPE;
  position: fixed; /* Keeps the TOC fixed in place */
  top: 30%; /* Adjust to position it below the header */
  left: 10px; /* Adjust based on where you want it on the screen */
  width: 15%; /* Set a fixed width */
  background-color: rgba(251, 251, 251, 0.5);
  border: 1px solid rgb(128, 128, 128);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Ensure it stays on top of other content */
  word-wrap: break-word;
}

.internal-toc ul {
  list-style-type: disc; /* Adds dots as bullet points */
  margin: 0;
  padding-left: 20px;

}

.internal-toc li {
  margin: 5px 0;

}
.internal-toc li::marker {
  color: #387fb9; /* Sets the color of the dots */
  font-size: 0.5em; /* Optional: Make the dots larger */
}
.internal-toc button {
  font-family: GROUPE;
  text-decoration: none;
  color: #387fb9;
  font-size: 0.6em;
  border: none;
  background: none;
  transition: font-size 0.3s ease, color 0.3s ease;
  text-align: left;

}

.internal-toc button:hover {
  text-decoration: underline;
  font-size: 0.65em;
  cursor: pointer;
}
.pinned-button {
  position: absolute; 
  top: 1%;
  left: 1%;
  z-index: 1001;
}

.pinned-button button {
  font-family: GROUPE;
  padding: 5px 10px;
  font-size: 0.4em;
  background-color: #7a7a7a;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.pinned-button button:hover {
  background-color: #555;
}