@import url("../font/stylesheet.css");
*{
  box-sizing: border-box;
}
.desktop {
  display: block;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 1.35vh; /* Adjusts size relative to viewport width */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  width: 100%;
  background: #ffffff;
  /* font-family: 'Neue Montreal', sans-serif; */
  font-family: 'Lausanne', sans-serif;
  font-size: 0.9rem; 
  color: #000000;
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  overflow: auto;
  box-sizing: border-box;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

h1, h2, h3 {
  font-weight: 400;
  margin-bottom: 0;
}

h3 {
  font-size: 1.3rem;
}

/* Ensure minimum and maximum font sizes for better readability */
@media (max-width: 768px) {
  body {
      font-size: 0.8rem; /* Responsive scaling for smaller screens */
  }
}

@supports (-webkit-touch-callout: none) {
  /* Safari-specific adjustments */
  body {
      font-size: 1rem;
  }
}

::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

a,
a:visited {
  color: #000000;
  text-decoration: none;
}

/* .row a {
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
  font-family: 'Karl Mono ST', monospace;
  font-size: 1.4rem;
} */

a:hover,
a:focus {
  color: #ff9100;
  transition: all 0.3s ease-in-out;
}

li {
  display: grid;
}

.mobile {
  display: none;
  visibility: hidden;
  font-size: 0.8rem;
  font-weight: normal;
}

video {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

@media only screen and (max-width: 768px) {
  .desktop {
    display: none !important;
  }
  .mobile {
    display: block;
    visibility: visible;
  }
}

.header {
  padding: 2% 2% 0% 2%;
  padding-top: 5vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3; /* Ensure the header appears above other content */
  padding-bottom: 1%;
}

.grid {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 1fr 1fr;
  justify-content: right;
  width: 100%;
}

.main-media {
  display: flex;
  justify-content: center; /* Center the media horizontally */
  align-items: center; /* Center the media vertically */
}

.main-content {
  display: flex;
  padding: 2%;
  height: calc(100vh - 21vh - 5vh); /* Adjust height to fit the viewport minus header height */
  padding-bottom: 2%;  
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: left;
  width: 50%; 
  height: 94vh;
  z-index: 2;
  overflow: hidden;
    /* border: 5px solid red; 
  background-color: #bbb; */
}

.sidebar-item {
  /* margin-top: 5px; */
  width: 100%; /* Adjust the width as needed */
  text-align: left; /* Center the text */
}

.sidebar-item a {
  text-decoration: none;
  color: #000000;
}

.sidebar-item a:hover {
  color: #ff9100;
}

.project-year.highlight {
  color: #ff9100; /* Highlight color */
}

.main-media {
  margin-bottom: 20px; /* Add some space between the main media and the project details */
}

#image-gallery {
  width: 100%; /* Remaining space beside the sidebar */
  height: 100vh; /* Full height */
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: center; /* Center the container horizontally */
  background-color: white; /* Background for contrast */
  position: fixed;
  right: 0;
  top: -5%;
  z-index: -1; /* Lower z-index to stay in the background */
  pointer-events: none; /* Allow scrolling through the image gallery */
}

/* Inner 16:9 aspect ratio container */
.image-container {
  width: 60%; /* Full width of the gallery area */
  /* max-width: calc(100vh * (16 / 9)); Maintain 16:9 aspect ratio */
  position: relative;
  background-color: white; /* Background behind images/videos */
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  overflow: hidden;
}

.image-container::before {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* Fallback for 16:9 aspect ratio */
}

/* Media inside the gallery */
.image-container video,
.image-container img {
  position: absolute;
  max-width: 100%; /* Fit within the container horizontally */
  max-height: 100%; /* Fit within the container vertically */
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
}

#gallery-image img.active, #gallery-image video.active {
  opacity: 1;
}

#gallery-image img.active, #gallery-image video.active {
  opacity: 1;
}

.footer:hover + .image-container {
  background-color: #ff9100;
}

.footer {
  width: 100%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  left: 0;
  position: fixed;
  bottom: 0; /* Position the footer at the bottom */
  text-align: right; /* Align text to the right */
  z-index: 2; /* Higher z-index to appear above the background */
  font-size: 0.8rem; /* Adjust font size for better readability */
  pointer-events: none; /* Allow scrolling through the image gallery */
}

.work-content { 
  width: 50%;
  display: flex;
  flex-direction: column;
  margin-top: 8vh;
  align-self: center;
  padding: 2%;
  padding-bottom: 60px; /* Add padding to avoid overlap with the footer */
  min-height: 100vh; /* Ensure the main content takes up at least the full viewport height */
  position: relative; /* Ensure the main content is positioned relative to the background */
  z-index: 2; /* Higher z-index to appear above the background */
  text-align: justify;
}

.work-content h1 {
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 3.5rem;
  font-variant-caps: all-small-caps;
}

.work-content h2 {
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 1.6rem;
}

.work-content p {
  margin-bottom: 20px;
}

.work-content a {
  color: #ff9100;
  text-decoration: none;
}

.project-details {
  margin-bottom: 20px; /* Add some space between the sections */
}
.project-details a:hover {
  text-decoration: underline;
}

#main-media-container {
  /* border: 2px solid red; Add a border for visibility */
  display: block !important; /* Ensure it's displayed */
  width: 100%;
  height: auto;
}

/* Responsive iframe container */
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

/* Style the iframe to fit the container */
.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive container for Spotify iframe */
.responsive-spotify-container {
  position: relative;
  width: 100%; /* Full width of the parent */
  padding-bottom: 56.25%; /* Maintain a 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.responsive-spotify-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  border: none; /* Remove border */
}

.project-gallery {
  display: grid;
  margin-top: 40px; /* Add some space between the sections */
  row-gap: 10px; /* Add some space between rows */
  gap: 10px; /* Add some space between gallery items */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
  gap: 50px; /* Space between items */
  padding-bottom: 4%;
}

.gallery-item {
  width: 100%;
  display: absolute;
  height: auto;
  object-fit: contain; /* Ensure the entire image is visible */
  align-self: center;
  max-width: 100%; /* Ensure images do not exceed container width */
  max-height: 100%; /* Ensure images do not exceed container height */
}

/* Style for videos */
.gallery-item video {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.google-drive-video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9; /* Ensures a proper aspect ratio */
}

/* Modal styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  display: flex; /* Use Flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 2;
}

.modal-content {
  width: 90vmax; /* Set width to 80% of the viewport minimum dimension */
  height: 80vmin; /* Set height to 80% of the viewport minimum dimension */
  max-width: 1000px; /* Maximum width */
  max-height: 800px; /* Maximum height */
  margin: auto;
  display: flex; /* Use Flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: white;
  padding: 40px; /* Add padding */
  box-sizing: border-box; /* Include padding in width and height */
  position: relative;
  z-index: 3;
}

.modal-image, .modal-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background-color: white;
  z-index: 3;
}

/* Make markdown images clickable */
.clickable-image {
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.clickable-image:hover {
  transform: scale(1.01);
}

.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: black;
  font-size: 40px;
  /* font-weight: bold; */
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0);
  color: white;
  border: none;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
}

.arrow.left {
  left: -150px;
}

.arrow.right {
  right: -150px;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .main-content {
      flex-direction: column;
  }

  .project-details {
      width: 100%; /* Full width for small screens */
  }

  .project-gallery {
      width: 100%; /* Full width for small screens */
  }
}

iframe {
  padding: 5%;
}

.gallery-item:hover {
  transform: scale(1.05);
}

#about-content {
  width: 35%;
  margin-left: 5%;
  margin-top: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* text-align: justify; */
  box-sizing: border-box;
  overflow: none;
  align-self: right;
}

.side-image {
  margin-left: 15%;
  display: flex;
  align-items: center; /* Center the image vertically within the side-image container */
  justify-content: center; /* Center the image horizontally within the side-image container */
}

.portrait {
  width: 80%;
  max-width: 30vw; /* Adjust the size as needed */
  margin: auto;
}

.mobile-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  font-size: 1.5rem;
  padding: 20px;
  background-color: white;
}

/* Style footnote numbers */
.footnote-ref {
  text-decoration: none;
  font-size: 0.5rem;
  /* vertical-align: center; */
  /* margin-left: 2px; */
}

/* Style the footnote section */
.footnote {
  font-size: 0.9em;
  margin-top: 10px; 
  padding: 5px;
  border-left: 3px solid #ccc;
  padding-left: 10px;
}

/* Add a return link */
.footnote-back {
  text-decoration: none;
  font-size: 0.9em;
  margin-left: 5px;
}