:root {
/* MARGINS */
  --margin: 1.2vw;
  --button-margin: var(--margin) calc(var(--margin)*2) var(--margin) calc(var(--margin)*2);
  --header-padding: calc(var(--margin)/4) 2.2vw var(--margin) var(--margin);
  --header-padding: calc(var(--margin)/3) 2.2vw calc(var(--margin)/4) var(--margin);
  --xlarge-text: 5vw;
  --large-text: 1.2vw;
  --medium-text: 0.9vw;
  --small-text: 0.7vw;

  --grey: #E0E0E0;
  --dark-grey: #585858;
  --white: #F8F8F8;
  --black: #101010;
  --almost-black: #212121;

  --header-grey: #ebeaea;

  --main-column: 58.3333333333vw;
  /* --minor-column: 41.6666666667vw; */
  /* --minor-column: 40.6666666667vw; */
  --minor-column: 40.6666666667vw;
}

/* GENERAL */

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    font-family: 'source-code-pro';
    box-sizing: border-box;
    color:var(--black);
}

div {
  box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: var(--white);
}

#header {
  display: flex;
  position: fixed;
  top: 0; left: 0; right: 0;
  justify-content: center;
  column-gap: 22vw;
  /* justify-content: space-between; */
  z-index: 30;
  padding: var(--header-padding);
  line-height: 1em;
  /* background: linear-gradient(180deg, var(--header-grey) 50%, rgba(255, 255, 255, 0) 80%); */
  background: var(--white);
  color: var(--dark-grey);
  font-size: var(--medium-text);
  transition: top 1s;
  /* font-style: italic; */
}

#theme-toggle:hover {
  color: var(--black);
  text-decoration: underline;
}

#theme-toggle {
  cursor: pointer;
}

#header a, #header a:visited, #header a:active, #header a:after {
  color: var(--black);
  text-decoration: none;
}

#headline-section {
  display: inline-flex;
  position: relative;
  font-size: var(--medium-text);
  justify-content: space-around;
  row-gap: 3vw;
  padding: 4.3vw var(--margin) 4vw var(--margin);
  /* padding: 3vw var(--margin) 3vw var(--margin); */
  flex-wrap: wrap;
  text-align: center;
}

#big-title {
  display: inline-block;
  text-align: center;
  font-size: var(--xlarge-text);
  font-family: "source-serif-pro";
  text-align: center;
  width: 100%;
  color: var(--black);
  line-height: 1em;
  padding-right: calc(2* var(--margin) / 3);
  z-index:15;
}

.layout-column {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow-x: hidden;
  padding-bottom: var(--margin);
  position: relative;
  transition: max-width 1s;
}

.layout-column::-webkit-scrollbar {
  display: none;
}

#text-column {
  display: inline-block;
  /* max-width: 33.3333333333vw; */
  max-width: var(--minor-column);
  /* max-width: 40vw; */
}

#text-container {
margin-bottom: var(--margin);
}

#images-column {
display: inline-block;
background: var(--white);
/* max-width: 66.6666666667vw; */
max-width: var(--main-column);
/* max-width: 60vw; */
padding-top: 2vw;
/* padding-top: calc(var(--margin) + 1.5vw); */
    line-height: 1.4em;
    font-family: 'source-code-pro';
    /* padding-right: calc(2* var(--margin) / 3); */
}

/* #images-container {
  margin-bottom: 3vw;
} */

#graph-column {
  background: #F8F8F8;
    /* width: 8.33333333333vw; */
    width: 1vw;
    overflow: hidden;
    z-index:40;
    cursor: pointer;
}

canvas {
  cursor: pointer;
}

/* TEXT */

.page {
    /* display: flex; */
    /* flex-direction: row; */
    overflow: hidden;
    height: auto;
    transition: max-height 1s;
    max-height: 200vh;
    padding-right:var(--margin);
    padding-left:var(--margin);
    transition: max-height 1s;
    /* background: linear-gradient(180deg, #F8F8F8 66.83%, #BEBEBE 100%); */
    /* background: linear-gradient(180deg, #BEBEBE 0%, #F8F8F8 10%, #F8F8F8 90%, #BEBEBE 100%); */
  }

.page-number {
  /* display:inline-block; */
    /* min-width: 2.33333333333vw; */
    min-width: 8vw;
    /* max-width: 2.33333333333vw; */
    /* border: solid; */
    display: inline-block;
    text-align: center;
    /* transform: translate(-100%, 0); */
}

.page-content {
    /* padding: var(--margin); */
    /* width: auto; */
    overflow: auto;
    /* display: inline-block; */
    width: 39vw;
    /* padding-right: 7vw; */
}

.chrono-link, .filter-link {
  cursor: pointer;
}



.dot {
    height: var(--large-text);
    width: var(--large-text);
    border-radius: 50%;
    display: inline-block;
    background-color: var(--grey);
    vertical-align: top;
    text-align: center;
    font-family: 'source-code-pro';
    color: var(--grey);
    text-transform: uppercase;
    font-size: var(--small-text);
    line-height: var(--large-text);
    margin-left: calc(var(--margin)/2);
    cursor: pointer;
    color: var(--black);
}

.dot.active, .active .dot, .page .dot:hover{
    /* background-color: var(--orange); */
    background-color: var(--black);
    color: var(--white);
}

/* .frame.disconnected {
  max-height: 10px;
} */

.dot.disconnected {
  background: none;
  border: solid var(--black) 1.5px;
  color: var(--black);
}

/* IMAGES COLUMN */
/* .midi .outer-frame {
  max-height: 100vh;
} */

.frame-container {
  position: relative;
  max-height: 98vh;
  transition: max-height 1s, width 1s;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  row-gap: calc(var(--margin) * 2 / 3);
  height: min-content;
  padding-bottom: var(--margin);
}

.outer-frame {
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  /* column-gap: calc(2 * var(--margin) / 3); */
  /* flex: 1 0 auto; */
  padding-right: calc(2 * var(--margin) / 3);
  z-index: 0;
  padding-left: var(--margin) 0 0 var(--margin);
}

.frame {
  display: inline-flex;
  flex-direction: column;
  flex: 1 0 auto;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  scroll-snap-align: start;
  padding-left: var(--margin);
  flex: 1 0 auto;
}

.img-container {
  display: inline-flex;
  align-items: center;
  justify-content: left; /* Center the image horizontally */
  transition: max-height 1s;
  width: fit-content;
  /* border: solid red; */
  flex-shrink: 0;
  max-height: 80vh;
  position: relative;
}
.img-container.last {
  width: 100%
}

.title-row,
.metadata-layout {
  flex-grow: 1; /* Allow these elements to grow */
  flex-shrink: 1; /* Allow these elements to shrink */
  min-width: 0; /* Ensure they can shrink below their content width */
}

.title-row::after, .metadata-layout::after {
  content: ".";
}

.frame.invisible .metadata-layout, .frame.invisible .title-row {
  opacity: 0;
}

.img-container img {
  max-width: 100%;
  max-height: 100%;
  /* max-height: 98vh; /* Adjust based on container height */ */
  width: auto; /* Allow width to scale */
  height: auto; /* Allow height to scale */
  object-fit: contain; /* Ensure image is fully visible */
  box-sizing: border-box;
  display: block;
}

.metadata-layout {
  column-count: 2;
  column-gap:2em;
  font-size: var(--small-text);
  line-height: var(--medium-text);
  color: var(--dark-grey);
  position: relative;
  padding-left: 2vw;
}


/* .frame div {
  padding-right: calc(2*var(--margin)/3);
} */

.outer-frame::-webkit-scrollbar {
display: none;
}

.title-row {
/* display: inline-flex; */
/* justify-content: space-between; */
/* padding-left: 2em; */
font-size: var(--medium-text);
line-height: 1em;
transition: max-height 1s, padding-top 1s;
/* flex: 0 1 auto; */
text-transform: uppercase;
/* column-gap: var(--margin); */
z-index: 20;
padding-right: calc(2* var(--margin) / 3);
padding-top: 1.5em;
padding-bottom: 0.5em;
/* align-items: flex-end; */
padding-left: 2vw;
}

.title {
  /* max-width: 60%; */
  text-wrap: balance;
}

.scroll-handles {
  color: var(--dark-grey);
  position: absolute; bottom: 0;
  font-size: var(--small-text);
  /* right: var(--margin); */
  padding-right: calc(var(--margin)/1.5);
  padding-left: var(--margin);
  z-index: 11;
  right: 0;
  bottom: var(--margin);
  transition: opacity linear 1s;
  /* margin-top: 2.5em; */
  /* background-color: var(--white); */
  /* background: linear-gradient(90deg, rgba(248, 248, 248, 0) 0%, var(--white) 20%); */
background: radial-gradient(circle, var(--white) 70%, rgba(248, 248, 248, 0) 100%);
  /* font-size: var(--medium-text); */
}

.arrow {cursor:pointer}
.arrowleft {display: none}

/* HIDDEN STUFF */
.page.hidden {
background: linear-gradient(180deg, var(--almost-black) 78.12%, rgba(0, 0, 0, 0.00) 100%);
max-height: 1em;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
margin-bottom: 0.5em;
/* padding: 0.5em 0em 0.5em 0em; */
}

.page.hidden .selectable, .page.hidden .filter-link {
  background: none;
}

.page.hidden:hover {max-height: 1.5em}

.frame-container .dot {
  position: absolute;
  bottom: calc(var(--margin)*2);
  left: calc(var(--margin) / 2);
  /* margin-top: 2.5em; */
}

.frame-container.hidden {
/* max-height: 2vw; */
cursor: pointer;
/* margin-top: var(--margin); */
/* margin-top: calc(var(--margin)/2); */
padding-top:0;
padding-bottom: calc(var(--margin)/1.5);
  /* max-height: 5vh; */
/* overflow: hidden; */
/* background: linear-gradient(90deg, #212121 70%, rgba(0, 0, 0, 0.00) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}

.sfumatura-verticale {
  z-index: 20;
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--white) 0%, rgba(248, 248, 248, 0.2) 20%, rgba(248, 248, 248, 0.2) 70%, var(--white) 95%);
  /* background: linear-gradient(180deg, rgba(248, 248, 248, 0) 70%, var(--white) 95%); */
}

.hidden .sfumatura-verticale {
  display: block;
}

.sfumatura-sinistra {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5vw;
  background: linear-gradient(270deg, rgba(248, 248, 248, 0) 70%, var(--white) 95%);
  z-index: 10;
}

.sfumatura-destra {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 5vw;
  background: linear-gradient(90deg, rgba(248, 248, 248, 0) 70%, var(--white) 95%);
  z-index: 10;
}

/* .hidden .scroll-handles, .hidden .title-row, .hidden .metadata-row, .hidden .dot {
  display: none;
} */

.hidden .scroll-handles, .hidden .title-row, .hidden .metadata-layout, .hidden .dot {
  max-height: 0;
  overflow: hidden;
  border: none;
  /* padding: 0; */
  padding-top: 0;
  padding-bottom: 0;
}

.hidden .img-container {
  max-height: 5vh;
  overflow: hidden;
}
.hidden .outer-frame {
  overflow-x: hidden;
}
.frame-container.hidden:hover .img-container, .frame-container.fakehover .img-container {
  max-height: 8vh;
}

.frame-container.hidden:hover .dot, .frame-container.fakehover .dot {
  max-height: 20vh;
  bottom: var(--margin);
}

.frame-container.disconnected.hidden:hover .dot, .frame-container.fakehover .dot {
  border:solid 0.5px;
}

.frame-container.hidden:hover .title-row, .frame-container.fakehover .title-row {
  max-height: 10vh;
  padding-top: var(--margin);
}

.frame-container:hover {
  /* border: solid; */
}

.hidden img {
  /* max-height: 3vh; */
  width: 100%;
  object-fit: cover;
  object-position: 0 center;
}

/* .frame-container.hidden:hover {
  max-height: 5em;
} */


/* FILTER LINKS */
/* .page .filter-link:hover, .page .filter-link.selectable { */
.filter-link {
  background: linear-gradient(var(--grey) 0 0);
  background-position: center;
  background-repeat: no-repeat;
  color: var(--black);
}

.filter-link .closebtn {
  display: none;
  font-family: 'source-code-pro';
  font-size: var(--small-text);
  line-height: 1em;
  padding: 5px 2px 0 3px;
}

.filter-link.animated {
  animation-name: filteranimation;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes filteranimation {
  0% {background: var(--white); color: var(--black); background-size: auto calc(var(--large-text)*0.9);}
  100% {background: var(--black); color: var(--white); background-size: auto calc(var(--large-text)*0.9);}
}

.page .filter-link {
  background-size: auto calc(var(--large-text)*0.9);
  display:inline-flex;
  align-items: flex-start;
}

.page .filter-link.selected, .page .filter-link:hover {
  background-size: auto calc(var(--large-text)*1.2);
}

.frame .filter-link, .frame .filter-link.selected, .frame .filter-link:hover {
  background-size: auto var(--small-text);
}

.filter-link.selected .closebtn:hover {
  text-decoration: underline;
}


.filter-link.selected .closebtn {
  display: inline;
}

.filter-link.selected, .filter-link:hover {
  color:var(--white);
  background: linear-gradient(var(--black) 0 0);
  background-position: center;
  background-repeat: no-repeat;
}

#selection-indicator {
position: fixed;
bottom: 0;
font-size: var(--medium-text);
left: 30vw;
width: 20vw;
white-space: nowrap;
display: none;
font-size: var(--medium-text);
font-size: var(--small-text);
    line-height: 1;
    font-family: 'source-code-pro';
z-index:50;
align-items:center;
}

#name-selection {
text-transform: uppercase;
cursor: pointer;
font-size: var(--medium-text);
}

/* #name-selection, #selection-counter-photo, #selection-counter-text { */
  #selection-indicator span {
    line-height: var(--medium-text);
  /* padding: calc(var(--margin)/4) calc(var(--margin)/2) 0 calc(var(--margin)/2)!Important; */
  /* background-color: var(--grey); */
  /* border-radius: 0 0.6em 0 0; */
  /* padding: 0.2vw 0.5vw 0.1vw 0.5vw; */
  /* padding: var(--header-padding); */
  padding: calc(var(--margin)/4) calc(var(--margin)/2) calc(var(--margin)/3) calc(var(--margin)/2);
  margin: 0 calc(var(--margin)/3) 0 calc(var(--margin)/3);
  /* background: linear-gradient(180deg, #ebeaea 20%, var(--white) 100%); */
  background: var(--black); color: var(--white);
  /* border: solid white 0.2px; */
  display: inline-block;
  width: min-content;
}

#filter-highlighter {
  right: 0;
  display: flex;
}

/* #filter-highlighter input, #filter-highlighter label, #filter-highlighter span, #selection-indicator {
  padding: 0.3em 0.6em 0.3em 0.6em
} */


/* NOTES */
#notes-container {
  font-family: 'source-code-pro';
  font-size: var(--small-text);
  position: fixed;
  bottom: -10vh;
  /* left: 41.6666666667vw;
  width: 58.3333333333vw; */
  width: 49vw;
  left: var(--main-column);
  /* max-height: 5vh; */
  padding: calc(var(--margin)*2) calc(2*var(--margin)/3) var(--margin) var(--margin);
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, var(--white) 30%);
  column-count: 2;
  column-gap: 20px;
  transition: bottom 1s;
  vertical-align: text-bottom;
}

#notes-container.shown {
  bottom: 0vh;
}

/* TYPOGRAPHY */
.page {
  font-family: "source-serif-pro";
  font-weight: 400;
  overflow: hidden;
  height: auto;
  white-space: pre-wrap;
  font-size: var(--large-text);
  line-height: 1.3em;
}

.page-number {
  font-family: 'source-code-pro';
color: var(--dark-grey);
text-transform: uppercase;
font-size: var(--small-text);
}

.hidden .page-number {-webkit-text-fill-color: var(--dark-grey)}

.note {
  display: inline-block;
  vertical-align:top;
  text-align: center;
  font-family: 'source-code-pro';
  font-size: var(--small-text);
  line-height: var(--medium-text);
  transform:translate(0, 20%);
  /* margin-left: calc(var(--margin)/2); */
  cursor: pointer;
}

#overlay1 {
  font-size: var(--xlarge-text);
  line-height: 1;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: var(--white);
  font-family: 'source-serif-pro';
  position: fixed;
  z-index:20;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.overlay {
  opacity: 1;
  transition: opacity 1.5s ease;
}

.overlay.removed {
  opacity: 0;
}

#overlay1.removed span {
  opacity: 0;
  animation-play-state: paused;
}

#overlay1 span {
  text-align: center;
  animation-name: overlayanimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  opacity: 1;
  transition: opacity 1s ease;
}

@keyframes overlayanimation {
    0% {opacity: 0%};
    100% {opacity: 100%}
}

#overlay2 {
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  font-family: 'source-serif-pro';
  position: fixed;
  z-index:18;
  /* opacity: 1; */
  /* opacity: 50%; */
  /* filter: blur(10px); */
  backdrop-filter: blur(1px);
  transition: opacity 1.5s ease, background 1s ease;
}

#tut-box {
  position: fixed;
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'source-code-pro';
  font-size: var(--large-text);
  text-align: center;
  padding: calc(var(--margin)/2);
  min-height: 15vw;
  background: var(--header-grey);
}

#tut-box div {
  z-index: 10;
}

#tutorial-text {
  font-family: 'source-serif-pro';
  text-align: left;
  width: 100%;
  padding: 0 calc(var(--margin)/2) 0 calc(var(--margin)/2);
}

#skipbtn {
  position: absolute;
  top: calc(var(--margin)/2);
  left: calc(var(--margin)/2);
}

#nextbtn {
  position: absolute;
  bottom: calc(var(--margin)/2);
  right: calc(var(--margin)/2);
}

#arrowbtn {
  position: absolute;
  top: calc(var(--margin)/2);
  right: calc(var(--margin)/2);
}

#skipbtn, #nextbtn, #tutorial-counter {
  font-size: var(--medium-text)!Important;
}

#skipbtn, #nextbtn {
  cursor: pointer;
}
#skipbtn:hover, #nextbtn:hover {
  text-decoration: underline;
}


#overlay3 {
  font-size: var(--xlarge-text);
  line-height: 1.5;
  left: 0; right: 0;
  top: 0; bottom: 0;
  /* background: var(--white); */
  font-family: 'source-serif-pro';
  position: fixed;
  z-index:50;
  align-items: center;
  text-align: center;
  /* opacity: 1; */
  /* transition: opacity 1.5s ease; */
  display: none;
}

#overlay3 span {
  text-align: center;
  width: 100%;
}

@media (max-width: 991px) {
#overlay3 {
  display: flex;
}
}

#finale {font-family: 'source-code-pro'; width: 100%; text-align: center;margin-top: var(--margin); font-size: var(--medium-text);}
#finale a {
  color: var(--dark-grey);
}

#finale a:hover {
  color: var(--black);
}