/* size of the navigation bar */
:root {
  --sidebar-width: 180px;
  --sidebar-items-margin-top: 15%;
  --popup-width: 50%;
  --hamburger-color: rgb(0, 0, 0);
  --navitem-hover-color: rgb(234, 234, 234);
  --text-hover-color: rgb(108, 108, 108);
  --navbar-color: rgba(246, 202, 202, 0);
}

hr {
  height: 0.5px;
}

/* mobile: don't show lines */
@media (max-width: 768px) {
  hr {
    display: none;
  }
}

/* mobile and medium screens */
@media (max-width: 1400px) {
  hr .mdnone {
    display: none;
  }

  #intro-text {
    font-size: 12px !important;
    font-family: Futura Light;
    font-weight: 300;
  }
}

#intro-text {
  font-family: Futura Book Regular;
  font-weight: 300;
}

.smallhr {
  /* display: none; */
  width: 30%;
  margin: 0 auto;
}


.vertical-text {
  writing-mode: vertical-rl; /* Makes the text vertical */
  /* text-orientation: upright; *//* Keeps letters upright */
  text-orientation: sideways; /* Rotates the letters */
  transform: rotate(180deg);
  direction: rtl;
  /* margin-right: 20px; */
}

.vertical-line {
  transform: rotate(90deg); /* Rotates the <hr> element 90 degrees to make it vertical */
  transform-origin: left center; /* Ensures the line rotates correctly */
  background-color: black; /* Line color */
  direction: rtl;
  width: 700px;
  height: 0.5px;
  margin-top: -285px;
    /* Adds some spacing at the top */
  margin-left: 90px;
    /* Adds spacing between the line and the text */
}

.vertical-text-right {
  writing-mode: vertical-lr;
  text-orientation: sideways;
  transform: scaleX(-1);
  /* mirrors the text vertically */
  direction: rtl;
}

.vertical-line-right {
  transform: rotate(90deg);
  /* Rotates the <hr> element 90 degrees to make it vertical */
  transform-origin: left center;
  /* Ensures the line rotates correctly */
  background-color: black;
  /* Line color */
  direction: ltr;
  width: 500px;
  height: 0.5px;
  margin-top: -330px;
  /* Adds some spacing at the top */
  margin-left: -4px;
  /* Adds spacing between the line and the text */
}

/*-------------------------------*/
/*           Fonts               */
/*-------------------------------*/

@font-face {
  font-family: 'Futura Book';
  src: url('/static/font/FuturaBook.otf') format('truetype');
}
@font-face {
  font-family: 'Futura Book Regular';
  src: url('/static/font/futurabook/FuturaBook.ttf') format('truetype');
}

.typewriter {
  /* font-family: "Special Elite", monospace; */
  font-family: "Courier New", Courier, monospace;
  list-style: none;
}

.typewriter li {
  /* margin-bottom: 10px; */
  font-size: 0.90em;
}

.typewriter li a {
  text-decoration: none;
  color: inherit;
}

.typewriter2 {
  font-family: "Special Elite", monospace;
  padding-bottom: 100px;
  letter-spacing: 2px;
  /* margin-bottom: 10px; */
  /* font-family: "Courier New", Courier, monospace; */
  /* list-style: none; */
}

u .typewriter {
  display: inline-block;
  /* Ensures margin works properly */
  margin-bottom: 15px;
  /* Adjust the space as needed */
}

ul li {
  /* display: inline-block; */
  /* Ensures margin works properly */
  margin-bottom: 1px;
  padding: 0;
  margin: 0;
  /* Adjust the space as needed */
}
ul {
  display: flex;
  flex-direction: column;
  gap: 0px;
  /* Adjust the space between items */
}


body {
  position: relative;
  overflow-x: hidden;
  /* background-color: #CFD8DC; */
  font-family: "Futura Book" !important;
  /* font-weight: 20 !important; */
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.page-title {
  font-family: 'Futura Light';
}

h4 {
  font-family: 'Futura Light';
}

/* body p {
  font-family: "Futura Light" !important;
  font-weight: 500 !important;
} */

@font-face {
  font-family: 'Futura Light';
  src: url('/static/font/FuturaLight.ttf') format('truetype');
}

footer {
  font-family: "Futura Light" !important;
  font-weight: 400;
}

/*-------------------------------*/
/*           Index               */
/*-------------------------------*/

#index-nav u.typewriter {
  display: inline-block;
  margin-bottom: 12px;
}

#index-nav li {
  margin-bottom: 6px;
}

#index-nav li:hover {
  color: var(--text-hover-color);
}

ul.exhibitions li {
  padding-bottom: 10px;
}

ul.exhibitions li:hover {
  color: var(--text-hover-color);
}

/*-------------------------------*/
/*           Main                */
/*-------------------------------*/

.container {
  /* display: flex; */
  align-items: flex-start;
}
/*  */

/* for mobile screens */
@media screen and (max-width: 768px) {
  :root {
    --sidebar-width: 45%; 
    --popup-width: 80%;
  }
}


.card img {
  width: 100%;  /* Ensures the image takes the full width of the card */
  height: auto; /* Maintains aspect ratio */
  object-fit: contain; /* Ensures the image is scaled properly within its container */
}

/* loader */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background:
    linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
    linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
  background-repeat: no-repeat;
  animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
   content: "";
   grid-area: 1/1;
   border-radius: 50%;
   background: inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.loader::after {
   opacity: 0.83;
   transform: rotate(60deg);
}
@keyframes l23 {
  100% {transform: rotate(1turn)}
}


body,
html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}


#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 1.25rem;
  border: none;
  background: transparent;
  border-radius: 50%;
  /* font-size: 24px; */
  color: rgba(0, 0, 0, 0.514); /* Color of the arrow icon */
  text-decoration: none;
  /* transition: transform 0.3s ease, color 0.3s ease; */
}
#backToTopBtn:hover {
  transform: scale(1.2);
  color: var(--navitem-hover-color);
}

#infoBtn {
  display: flex;
  position: fixed;
  top: 30px;
  right: 30px;
  border: none;
  background: #00000000;
  border-radius: 50%;
  color: #474747; /* Color of the arrow icon */
  text-decoration: none;
}

/* Style for the popup background */
.popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  z-index: 1; /* Sit on top */
  align-items: center;
  justify-content: center;
}

/* Popup content */
.popup-content {
  position: relative;
  background-color: #e9e9e9f3;
  margin: auto;
  padding: 45px;
  padding-right: 50px;
  /* right: 10; */
  border: none;
  width: var(--popup-width);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.096);
  text-align: justify;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 4px; /* Adjust as necessary */
  right: 15px; /* Adjust to ensure it does not overlap text */
  color: #aaaaaa;
  /* padding: 30px; */
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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


/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: var(--sidebar-width);
}

#sidebar-wrapper {
    z-index: 1000;
    left: var(--sidebar-width);
    width: 0;
    height: 100%;
    margin-left: calc(-1 * var(--sidebar-width));
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--navbar-color);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}

#wrapper.toggled #sidebar-wrapper {
    width: var(--sidebar-width);
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding-top: 70px;
}

/* #wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: calc(-1 * var(--sidebar-width));
} */

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/
.navbar {
  padding: 0;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 100%; /* HOVER OVER */
    /* margin: 0; */
    margin-top: var(--sidebar-items-margin-top);
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    position: relative; 
    line-height: 20px;
    display: inline-block;
    width: 100%;
}

.sidebar-nav li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 3px;
    background-color: var(--navitem-hover-color);
    -webkit-transition: width .2s ease-in;
      -moz-transition:  width .2s ease-in;
       -ms-transition:  width .2s ease-in;
            transition: width .2s ease-in;
}


.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
    width: 100%;
    -webkit-transition: width .2s ease-in;
      -moz-transition:  width .2s ease-in;
       -ms-transition:  width .2s ease-in;
            transition: width .2s ease-in;

}

.sidebar-nav li a {
    display: block;
    color: #ddd;
    text-decoration: none;
    padding: 10px 15px 10px 30px;    
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}
.sidebar-header {
    text-align: center;
    font-size: 20px;
    position: relative;
    width: 100%;
    display: inline-block;
}
.sidebar-brand {
    height: 65px;
    position: relative;
    /* background:#212531; */
    /* background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%); */
   padding-top: 1em;
}
.sidebar-brand a {
    color: #ddd;
}
.sidebar-brand a:hover {
    color: #fff;
    text-decoration: none;
}
.dropdown-header {
    /* text-align: center; */
    font-size: 0.8em;
    color: #ddd;
    padding-top:0;
    padding-bottom:0;
    margin:0;
    /* background:#212531;
    background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%); */
}
.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: #1a1a1a;
    box-shadow: none;
}
.dropdown-menu.show {
    top: 0;
}

/*-------------------------------*/
/*       Image Hover             */
/*-------------------------------*/

.image-hover {
  position: relative;
  display: block;
  width: 100%;
  /* Ensures it scales with the container */
  aspect-ratio: 9 / 12;
  /* Adjust as needed (e.g., 4/3, 1/1 for square) */
  overflow: hidden;
}

.image-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures images fill the space without distortion */
  position: absolute;
  top: 0;
  left: 0;
}

.image-hover .hover-image {
  opacity: 0;
  /* transition: opacity 0.3s ease-in-out; */
}

.image-hover:hover .default-image {
  opacity: 0;
}

.image-hover:hover .hover-image {
  opacity: 1;
}

/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
  position: fixed;
  top: 17px;  
  z-index: 999;
  display: block;
  width: 18px;
  height: 22px;
  margin-left: 15px;
  background: transparent;
  border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
  outline: none;
}
.hamburger.is-closed:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
  background-color: var(--hamburger-color);
}
.hamburger.is-closed .hamb-top { 
  top: 4px; 
  margin-top: -1px;
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
  top: 50%;
  margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
  bottom: 5px;  
  -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed:hover .hamb-top {
  top: 0;
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
  bottom: 0;
  -webkit-transition: all .35s ease-in-out;
}


/* don't show closing button for mobile screens */
/* @media only screen and (max-width: 768px) {
  .hamburger.is-open .hamb-top,
  .hamburger.is-open .hamb-middle,
  .hamburger.is-open .hamb-bottom {
    display: none;
  }
} */

.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
  background-color: var(--hamburger-color);
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
  top: 50%;
  margin-top: -2px;  
}
.hamburger.is-open .hamb-top { 
  -webkit-transform: rotate(45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
  -webkit-transform: rotate(-45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.8);
    z-index: 1;
}

next:hover {
  background-color: #c3c3c3;
  color: black;
}

.next {
  text-decoration: none;
  display: inline-block;
  padding: 1px 9px;
  background-color: #e6e6e6;
  color: white;
  border-radius: 50%;
}

.pagecontent {
    padding-top: 30px;
    /* padding-bottom: 30px; */
}



/*-------------------------------*/
/*         New Sidebar           */
/*-------------------------------*/


/* Style for the sidebar navigation */
#sidebar-wrapper {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border-color: #e0e0e0;
  /* Adjusts the top padding */
}

.nav .typewriter {
  list-style: none;
  /* Removes default list styles */
  padding-left: 0;
}


.nav .typewriter li a {
  text-decoration: none;
  color: #000000;
  /* font-size: 12px; */
  font-size: 0.68rem; /* NAVITEM */
  padding: 4px 6px;
  display: block;
  border-radius: 4px;
  line-height: 1.2
}

.nav .typewriter li a:hover {
  background-color: #e7e7e76d;
  color: #000000;
}

/* Style for section titles */
.section-title {
  margin: 10px 0;
  font-size: 12px;
  color: #000000;
}

/* Ensure everything is vertically aligned */
.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  :root {
    --sidebar-width: 100px;
    /* Smaller width on mobile */
  }
  .nav {
    padding-left: 10px;
  }
  .nav ul li a {
    font-size: 10px !important;
    /* Smaller nav-items */
  }
  .nav .section-title {
    font-size: 10px;
    /* Smaller titles */
  }
  
}


/*-------------------------------*/
/*         Nav Left Right Buttons           */
/*-------------------------------*/

.nav-button {
  font-family: "Courier New", Courier, monospace;
  font-weight: 500;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  text-decoration: none;
  z-index: 1000;
  background-color: transparent;
  color: black;
}

/* Only scale the text inside the button */
.nav-text {
  display: inline-block;
  transform: scaleY(2.1);
}

.nav-button-left {
  left: 30px;
}
.nav-button-right {
  right: 30px;
}

.nav-button-left:hover,
.nav-button-right:hover {
  font-size: 2em;
  color: rgb(219, 218, 218);
}
/* When the screen size is small, reduce the left and right distance */
@media (max-width: 768px) {
  .nav-button-left {
    left: 15px;
    font-size: 1.92em;
  }

  .nav-button-right {
    right: 15px;
    font-size: 1.92em;
  }
}

/* When the screen is even smaller, make them stick to the very edge */
@media (max-width: 480px) {
  .nav-button-left {
    left: 6px;
    font-size: 1.7em;
  }

  .nav-button-right {
    right: 6px;
    font-size: 1.7em;
  }
}

/*-------------------------------*/
/*           Tooltips            */
/*-------------------------------*/
.tooltip-text {
  font-size: 12px;
  visibility: hidden;
  background-color: var(--navitem-hover-color);
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
}

/* Top-Left Tooltip */
.nav-button .tooltip-text.top-left {
  bottom: 100%;
  /* Moves it above the button */
  left: 0;
  /* Aligns to left */
  transform: translateY(-5px);
}

/* Top-Right Tooltip */
.nav-button .tooltip-text.top-right {
  bottom: 100%;
  /* Moves it above the button */
  right: 0;
  /* Aligns to right */
  transform: translateY(-5px);
}

/* Show tooltip on hover */
.nav-button:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Default tooltip styling */
.image-tooltip {
  font-family: "Courier New", Courier, monospace;
  /* font-family: Futura Book; */
  position: absolute;
  background-color: var(--navitem-hover-color);
  color: rgb(0, 0, 0);
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  /* Prevents interference with other elements */
  transition: opacity 0.1s ease-in-out;
  z-index: 1000;
}

/*-------------------------------*/
/*        Image columns          */
/*-------------------------------*/

.image-columns {
  column-count: 2;
  column-gap: 20px;
  /* adjust gap between columns */
}

.image-columns img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

/* .image-columns {
  display: flex;
  gap: 20px;
  height: 100vh;
}

.image-columns-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.image-columns-column img {
  flex: 1;
  width: 100%;
  object-fit: cover;
  margin-bottom: 10px;
} */


/*-------------------------------*/
/*        Carousel               */
/*-------------------------------*/

.white-gradient {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * var(--nr-images)));
    /* Adjust the translateX value to match the number of images you have */
  }
}

.slider {
  background: transparent;
  /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125); */
  margin: auto;
  overflow: hidden;
  position: relative;
  height: 90%;
  width: 100%;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  position: absolute;
  height: 100%;
  width:5px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slide-track {
  animation: scroll 80s linear infinite;
  display: flex;
  width: calc(250px * var(--nr-images) * 2); 
  /* Double number of images for a seemless loop */
}

.slide {
  position: relative;
  /* height: 200px; */
  /* Fixed height for uniformity */
  /* width: 600px; */
  margin-right: 20px;
  /* Add spacing between images */
}

.slide img {
  width: 100%;
  /* Make the image responsive */
  height: 560px;
  /* Fixed height for uniformity */
  object-fit: cover;
  /* Maintain aspect ratio and cover the area */
  /* border-radius: 11px; */
  /* Optional: Add rounded corners for aesthetics */
}

/* Add additional slides by repeating the same images */
.slide-track .slide:nth-child(n + var(--nr-images) + 1) {
  margin-left: 20px;
  /* Ensure no gap between the repeated images */
}
/*-------------------------------*/
/*        Image columns          */
/*-------------------------------*/

/*-------------------------------*/
/*        Image columns          */
/*-------------------------------*/


/*-------------------------------*/
/*        Image flip             */
/*-------------------------------*/
.image-flip-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.image-flip {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 155.97%;
  /* 833 / 534 ≈ 1.5597 — this maintains your 534:833 ratio */
}

.image-flip img.front,
.image-flip img.back {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.hover-flip img.back {
  opacity: 0;
}

.hover-flip:hover img.back {
  opacity: 1;
}

.hover-flip:hover img.front {
  opacity: 0;
}