html {
  -kit-tap-highlight-color: transparent;
  overflow-y: scroll;
  /* Prevent blue outline on click */
}

body {
  font-family: 'Hanken Grotesk';
  font-size: 1rem;
  font-weight: normal;
}

/* Reset some default styles */
body, h1, h2, p {
  margin: 0;
  padding: 0;
  color: #D54400;
  /* Added text color */
  background-color: #fffefd;
  font-family: 'Hanken Grotesk';
  line-height: 110%;
}

/* Style the header */
header {
  color: #D54400;
  /* Added text color */
  text-align: left;
  /* Align the header to the left */
  padding: 0.7rem;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 6fr 3fr 3fr;  
  /* Make header contents flex */
  flex-direction: row;
  align-items: flex-start;
  /* Align items to the left */
  justify-content: space-between;
  height: 80px;
}

.filter:nth-of-type(1) {
  grid-column: 2;
}

.filter:nth-of-type(2) {
  grid-column: 3;
}

.checkbox-container {
  /* margin-bottom: 0.5em; */
}

/* styliser infos */
#lightbox-info::first-line{
  text-decoration: underline #D54400;
  text-decoration-thickness: 1.2px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Remove default padding */
}

nav ul li {}

a {
  text-decoration: none;
  color: #D54400;
  transition: color 0.3s;
}

a:hover {
  text-decoration: underline #D54400;
  text-decoration-thickness: 1.2px;
}

nav ul li a:hover {
text-decoration: underline #D54400;
text-decoration-thickness: 1.2px;
}

nav ul li .social:hover {
text-decoration: underline #D54400;
text-decoration-thickness: 1.2px;
}

nav.sticky {
  position: sticky;
  top: 0px;
  height: 2em;
  transition: all 0.2s ease-out;
  overflow: hidden;
  z-index: 999;
  background-color: white;
  display: flex;
  align-items: center;
}

nav.sticky ul {
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(5, minmax(250px, 1fr));
  gap: 1em;
  width: 100vw;
  padding: 1em;
}

nav.sticky.visibility {
  /* visibility: collapse; */
  height: 0px
}


/* Style the sections */
section {
  padding: 0.7rem 0.7rem 0 0.7rem;
  color: #D54400;
}


/* style the checkbox filter */
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]+label::before {
  content: '';
  border: 1px solid #D54400;
  padding: 0;
  margin-right: 0.5rem;
  border-radius: 1em;
  height: 10px;
  display: inline-block;
  width: 10px;
}

input[type="checkbox"]:checked+label::before {
  background-color: #D54400;
}

label {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Style the gallery */
.hidden {
  display: none;
}

.gallery img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
  cursor: pointer;

}

/* Make the image grow a little with cursor
.gallery img:hover {
    transform: scale(1.1);
}*/

/* Style for the image container */
.image-container {
  position: relative;
  width: 100%;
  margin-bottom: 0rem;
  /* Add some spacing between items */
}

/* Hover effect to show the overlay text */
.image-container:hover .overlay-text {
  opacity: 1;
}


/* Style for the overlay text */
.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  color: #D54400;
  /* Added text color */
  text-align: left;
  pointer-events: none;
  padding: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s;
  /* Fade in transition */
}

/* Show overlay text when the screen width is under 768 pixels */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 0em 1em 1em 1em;
}

.modal.active {
  opacity: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 3fr 1fr;
  grid-template-areas:
    "lightbox-media lightbox-media lightbox-media lightbox-media lightbox-media lightbox-media lightbox-media lightbox-media"
    "info info description description description description description description";
  gap: 1em;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 2em);
  height: calc(100% - 1em);
  z-index: 999;
  /* Ensure it appears on top of other content */
}

.splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.splide__arrow {
  width: 15%;
  height: 40%;
  top: calc(100% - 14.5em);
  transform: none;
  opacity: 1;
}

.splide__slide img, .splide__slide video {
  max-height: 70vh;
  max-width: 80vw;
}

.splide__arrow:disabled {
  visibility: hidden;
}

.splide__pagination__page:hover {
  background-color: #D54400;
}

.splide__pagination__page.is-active {
  background-color: #D54400;
}

#image-gallery.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}

#gallery{
  padding: 0.7rem;
}


#lightbox-info {
  grid-area: info;
  align-self: end;
}

#lightbox-media {
  display: block;
  flex: 1;
  /* Fill remaining space */
  position: relative;
  bottom:0;
  /* overflow: revert; */
  pointer-events: none;
  grid-area: lightbox-media;
}

.splide__arrows, video {
  pointer-events: all;
}

/*
.splide__slide{
  display: flex;
  justify-content: center;
  align-items: center;
}
.splide__slide img {
  max-height: 90vh;
} */
.video {
  z-index: 1003;
}

/* Style the lightbox image */
#media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  /* visibility: hidden; */
}

#media.active {
  /* visibility: visible; */
  display: block;
}

/* Style the lightbox description */
#lightbox-description {
  grid-area: description;
  align-self: end;

  /* Take only as much space as needed */
}

/* Style the custom close button */
#custom-close-button {
  position: absolute;
  top: 0.5em;
  right: 1em;
  cursor: pointer;
  /* Increase the size of the button */
  width: 15%;
  height: 15%;
  z-index: 1004;
}

#custom-close-icon.mobile{
  display: none;
}

/* Style the navigation buttons */
.lightbox-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15%;
  /* Adjust the button width */
  height: 15%;
  /* Adjust the button height */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 24px;
  /* Adjust the button font size */
  color: #333;
  /* Button color */
  border-radius: 50%;
  z-index: 1004;
}

#prev-button {
  left: 0.3%;
}

#next-button {
  right: 0.3%;
}

.background-modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

/* CSS for the left clickable area */
#left-click-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1002;
  /* Ensure it appears above other content */
  cursor: pointer;
  display: block;
  /* Initially hidden */
}

/* CSS for the right clickable area */
#right-click-area {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1002;
  /* Ensure it appears above other content */
  cursor: pointer;
  display: block;
  /* Initially hidden */
}

/* Style the footer */
footer {
  /* Added text color */
  padding: 1em;
  align-self: end;
}

/* Carousel container styles */
.carousel-container-test {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Set to 100% of the viewport width */
}

/* Individual carousel styles */
.carousel {
  width: 100%;
  /* Adjust the width as needed */
  /*  max-width: 600px;  Maximum width of each carousel */
  margin: 10px 0;
  /* Add spacing between carousels */
  overflow: hidden;
  border: 1px solid #D54400;
  /* Add a border for each carousel */
  position: relative;
}

.carousel img,
.carousel video {
  width: 100%;
  height: auto;
}

.carousel-item {
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s;
  position: relative;
}

.media-container {
  position: relative;
  /* Make the media container a relative position */
}

.media-counter-sp {
  position: absolute;
  /* Position the media counter absolutely */
  bottom: 5px;
  /* Adjust the vertical position to your preference */
  left: 25px;
  /* Adjust the horizontal position to your preference */
  background-color: rgba(0, 0, 0, 0.7);
  color: #D54400;
  padding: 1px 4px;
  /* Adjust the padding to your preference */
  border-radius: 4px;
  font-size: 14px;
}

/* Navigation arrows */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15%;
  cursor: pointer;
  z-index: 999;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

/* Add styles for hover and active states for the arrows (optional) */
.carousel-prev:hover,
.carousel-next:hover {
  font-size: 80px;
}

#work, #about {
  font-size: 2rem;
  text-indent: 3rem;
  /*position: absolute;
  top: 80px;*/
  /*overflow-y: auto;
  height: calc(100vh - 400px);*/
}

.first{
  text-indent:0;
}

.asterisque {
  padding: 1rem;
  align-self: end;
}

/* styling for the about page */
section header {
  padding: 0.7rem;
}

.about-page, .work-page {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height:100vh;
}

.about-page header, .work-page header {
  display: block;
  height: unset;
  margin-bottom: 80px;
}

.about-page .contact {
  margin-bottom: 80px;
}

.about-page header{
  padding:0;
}