@font-face {
    font-family: 'Cormorant';
    src: url('./assets/font/Cormorant-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  
@font-face {
    font-family: 'Cormorant';
    src: url('./assets/font/Cormorant-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

body {
    margin-top: 104.27px;
    background-color:  #FCF6F6;
    font-family: 'Cormorant', serif;
}



.menu-bar {
    position: fixed;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60pt;
    background-color: #FCF6F6;
    font-size: 16pt;
    justify-content: space-between;
    z-index: 1;
    top: 0px;
}


.leftcorner, .rightcorner, .center-section, .serie {
    position: absolute;
    top: 30px;
    text-decoration: none;
    color: black;
    transition: transform 0.3s ease;
  }

  .serie {
    left: 35.7%;
  }

  .leftcorner {
    left: 2.46%;
  }
  
  .rightcorner {
    right: 2.46%;
  }

  .center-section {
    left: 68.7%;    
  }

  #extra {
    left: 31.2%;
  }

  .leftcorner:hover, .rightcorner:hover, .menu-item center-section:hover, .submenu a:hover, .submenu2 a:hover {
    transform: skewX(-25deg); /* Only the hover effect for slant */
    display: block;
  }

  .center-section:hover .submenu  {
    display: block; /* Show submenu when hovering over peintures */
  }

  .submenu, .submenu2 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0px;
    z-index: 4;
    white-space: nowrap;
    min-width: max-content;
  }

  .submenu.visible {
    display: block;
  }

  .submenu a {
    display: block;
    text-decoration: none;
    color: black;
    margin: 5px 0;
    font-size: inherit;
    transform: none; /* Ensure submenu items aren't skewed by default */
  }

.slideshow {
    position: relative;
    margin-left: 20px;
    height: 500px;
    overflow: hidden;
    margin-bottom: 10px;    
}


.slideshow img {
    position: absolute; 
    margin-left: 20px;
}

.hidden {
    opacity: 0;
  }

.slideshow:hover {
    cursor: e-resize;
}


.textframe1 {
    display: flex;
    position: relative;
    font-size: 14pt;
    line-height: 22px;
    color: black;
    justify-content: space-between;
    margin-left: 50px;
    width: 850px;
    margin-bottom: 50px;
}

.textframe1 .place {
  flex-direction: column;
  align-items: center; /* center items horizontally inside .place */
  text-align: center;   /* optional: centers text inside */
  margin-top: 0px;
  margin-bottom: 0px;;
}

.textframe1 .credit {
  margin-top: 0px; /* optional spacing */
}

.textframe1 .year { 
    align-items: right;
}




.two-column-text {
    font-size: 14pt;
    line-height: 22px;
    width: 67%;
    column-count: 2;
    column-gap: 8%;
    margin-left: 16%;
    margin-bottom: 50px;
    
}

#spatiering{
  letter-spacing: 0.1pt;
}


.two-column-text p:first-of-type {
    margin-top: 0;
}
.two-column-text p:last-of-type {
    text-align: right;
}

.text-frame {
  margin-top: 20px;
  font-family: 'Cormorant', serif;
  font-size: 14pt;
  line-height: 1pt;
  text-align: left;
  margin-left: 2.46%;
  width: 100%;
  
}




.image-text-wrapper {
  position: flex;
  margin-left:  2.46%;
  margin-bottom: 100px;
  width: 700px;
}

.image-text-wrapper img {
  filter: drop-shadow(0.7px 0.7px 1.4px rgba(0, 0, 0, 0.5));
}

.image-text-wrapper2 {
  position: flex;
  flex-direction: column;
  margin-left:  2.46%;
  margin-bottom: 100px;
}

.image-text-wrapper2 img {
  filter: drop-shadow(0.1px 0.1px 0.8px rgba(0, 0, 0, 0.3));
}

.image02 {
  position: flex;
  flex-direction: column;
  margin-left:  2.46%;
  margin-bottom: 100px;
  height: 354.98px;
}

.image1 { height: 269.18px; }
.image2 { height: 297.78px; }
.image3 { height: 326.38px; }
.image4 { height: 354.98px; }
.image5 { height: 383.58px; }
.image6 { height: 412.18px; }
.image7 { height: 440.78px; }
.image8 { height: 469.38px; }
.image9 { height: 497.98px; }
.image10 { height: 526.58px; }
.image11 { height: 555.18px; }
.image12 { height: 583.78px; }
.image13 { height: 612.38px; }
.image14 { height: 640.98px; }
.image15 { height: 669.58px; }

.column1 {
  position: absolute;
  margin-left: 35.7%;
}


.column3 {
  position: absolute;
  margin-left: 55%;
}

.column4 {
  position: absolute;
  margin-left: 68.7%;
}


.cluster {
  display: flex;          /* Display elements horizontally */
  gap: 0px;               /* Gap between image-text-wrapper items */
  justify-content: flex-start; /* Align items to the left */
}

.cluster2 {
  display: flex;          /* Display elements horizontally */
  gap: 0px;               /* Gap between image-text-wrapper items */
  justify-content: flex-start; /* Align items to the left */
  margin-bottom: 57.2px;
}

.cluster3 {
  display: flex;          /* Display elements horizontally */
  gap: 0px;               /* Gap between image-text-wrapper items */
  justify-content: flex-start; /* Align items to the left */
  margin-bottom: 28.6px;
}

.cluster4 {
  display: flex;          /* Display elements horizontally */
  gap: 0px;               /* Gap between image-text-wrapper items */
  justify-content: flex-start; /* Align items to the left */
  margin-bottom: 85.8px;
}


.text-frame3 {
  margin-left: 35.7%;
  width: 29.5%;
  font-family: 'Cormorant', serif;
  font-size: 14pt;
  line-height: 22px; /* roughly 1.5 × 14pt */
  text-align: left;
}

#JB {
  text-align: right;
}

#creditweb {
  text-align: left;
  font-size: 9pt;
}

.title2 {
  font-size: 16pt;
}