html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

@font-face {
  font-family: 'Jost';
  src: url(./fonts/Jost-Regular.ttf);
}

* {
  font-family: 'Jost';
}

.sliderDiv {
  position: absolute;
  bottom: 20px;
  left: 50vw;
  transform: translateX(-50%);
  width: 700px;
  height: 30px;
  background-color: white;
  border: 1px solid black;
  border-radius: 13px;
  display: flex;
  /* z-index: 10; */
}

.firstCentury {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.lastCentury {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.mySlider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 400px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
}

.mySlider:focus {
  outline: none;
}

/* slider track  */
.mySlider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: #000000;
  height: 2px;
  cursor: pointer;
}

/* circle */
.mySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: #000000;
  cursor: pointer;
  margin-top: -6px;
  border-radius: 8px;
  
}


/* info div */

/* .infoDiv {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: white;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 30px;
  cursor: none;
}

.qMark {
  text-align: center;
  transform: translateY(-50%);
  font-family: 'Jost';
} */

/* hide div */
/* by defualt it has no opacity */
/* when it has .display added, full opacity */
.hideDiv {
  position: absolute;
  top: 10vh;
  left: 10vw;
  width: 80vw;
  height: 80vh;
  background-color: #000000;
  opacity: 0;
  pointer-events: none;
  border-radius: 20px;
  border: 1px solid white;


  display: flex;
  justify-content: center;
  align-items: center;
}

.textDiv {
  width: 95%;
  max-height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ centers child content horizontally */
  text-align: center;
  padding-bottom: 25px;
}

.hideDivTextTitle {
  color: white;
  /* font-size:1.5em; */
  font-size: clamp(1.2rem, 2vw, 1.5em);
  text-align: center;
  margin: 25px 0 10px 0;
}

.hideDivText {
  color: white;
  /* font-size: 1.3em; */
  font-size: clamp(1rem, 1.5vw, 1.3em); 
  max-width: 800px;
  text-align: center;
  margin: 0 0 0 0;
}

.hideDivText2 {
  margin: 20px 0 0 0;
}

.hideDivTextFootnote {

  font-size: clamp(0.8rem, 1vw, 1rem);
  /* font-size: 1rem; */
}

.display {
  opacity: 0.95;
  transition: 0.3s;
}