html,
body {
  margin: 0;
  padding: 0;
  background-color: #E7E1D1;
  color: #313131;
  font-family: "montserrat", sans-serif;
  overflow-x: hidden;
}

#canvas-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
}


h1 {
  font-family: "benton-modern-display", serif;
  font-weight: 400;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  padding-top: 2%;
  background-color: rgba(231, 225, 209);
  /* leggermente trasparente */
  backdrop-filter: blur(6px);
  /* effetto vetro */
  z-index: 100;

}

.navbar {
  display: inline-block;
  padding: 0.5rem 0.9375rem;
  /*border-radius: 50px;*/
  background-color: #E7E1D1;
  opacity: 0;
  transform: translateY(2vh);
  animation: fadeIn 0.8s ease-out 0.5s forwards;


}


.navbar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.navbar li {
  border-right: 0.0625rem solid #313131;
  padding: 0 3vw;
}

#first {
  padding-left: 0.5em;
}

#last {
  border-right: none;
  padding-right: 0.5em;
}

.list1 {
  position: relative;
  text-decoration: none;
  color: #313131;
  font-size: 0.875rem;
  padding: 0.2em 3em 1.5em 3em;
  transition: 0.5s ease;
  border-radius: 0.3125rem;
  user-select: none;
  display: inline-block;
}

.list1::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0.0625rem;
  left: 0;
  bottom: 0.3125rem;
  background-color: #313131;
  transition: width 0.3s ease-out;
}

.list1:hover::after {
  width: 100%;
}

.list1.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  left: 0;
  bottom: 0.3125rem;
  background-color: #313131;
}

.list1,
.list1.active {
  padding: 0.2em 3em 1.5em 3em !important;
}

.navbar li.dropdown {
  position: relative;
}

ul li ul.dropdown-menu li {
  display: block;
  color: #313131;
  border-right: none;
}

ul li ul.dropdown-menu li a {
  display: inline-block;
  text-decoration: none;
  padding: 0.625rem;
  text-align: center;
  color: #313131;
  padding-bottom: 1em;
  border-bottom: solid 0.0625rem #313131;
  transition: 0.2s ease;
}

ul li ul.dropdown-menu li a:hover {
  display: inline-block;
  padding: 0.625rem 2em 0.625rem 2em;
  text-align: center;
  color: #313131;
  padding-bottom: 1em;
  border-bottom: none;

}

#smallText {
  transition: 0.2s ease;
}

/*#smallText:hover {
  font-size: 0.8em;
}*/

#drpdwn {
  border: none;

}

ul li ul.dropdown-menu {
  width: 73%;
  border-right: solid 0.0125rem #313131;
  border-left: solid 0.0125rem #313131;
  border-bottom: solid 0.0125rem #313131;
  background-color: #E7E1D1;
  position: absolute;
  z-index: 200;
  display: none;
  color: #000000;
  padding-top: 0.625rem;
  transition: 0.3s ease;

}

.dropdown:hover ul.dropdown-menu {
  display: block;
}

/*contenitore per lo slideshow*/
.no_scroll {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
}



#title_page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

}

#title {

  font-size: 10vh;
  transform: translateY(2vh);
  text-align: center;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.5s forwards;
  font-weight: 600;

}


#subtitle {
  margin-top: 0;
  transform: translateY(-100%);
  opacity: 0;
  animation: fadeIn2 0.8s ease-out 1.1s forwards;
}

.SlideBtn {
  position: absolute;
  left: 46%;
  bottom: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;

  width: auto;
  
  height: auto;
  border: none;
  background-color: transparent;
  text-decoration: none;
  
  cursor: pointer;
  
  z-index: 50;
  


}

.SlideBtn svg {
  fill: #313131;
  stroke-width: 0.5;
  width: 6vh;
  height: 6vh;

  /* Reset del posizionamento per funzionare col Flexbox */
  position: relative;
  bottom: auto;
  display: block;
}

/* Nuovo stile per il testo "NEXT" */
.btn-label {
  font-family: "montserrat", sans-serif;
  font-size: 1.4vh;
  font-weight: 350;
  color: #313131;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: -1vh;
  opacity: 0;
  /*animation: fadeIn 0.8s ease-out 3.5s forwards; */
}

.UpperSlide {
  position: absolute;
  left: 46%;
  top: 20%;

  /* Flexbox settings */
  display: flex;
  flex-direction: column;
  /* Metto gli elementi in colonna */
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;

  /* Rimuovo width/height 0 */
  width: auto;
  height: auto;
  border: none;
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  z-index: 50;

  animation: fadeIn3 0.8s ease-out 4s forwards;
}

.UpperSlide svg {
  fill: #313131;
  stroke-width: 0.5;
  width: 6vh;
  height: 6vh;
  opacity: 0;

  /* Reset posizionamento */
  position: relative;
  top: auto;
  display: block;

  rotate: 180deg;
  
}

.sl1 {
  opacity: 0;
}

.sl1.show {
  animation: fadeIn3 0.8s ease-out 2s forwards;
}

.sl1.show svg {
  animation:
    fadeIn3 0.8s ease-out 2s forwards,
    bounce 1s ease-in-out 2.8s infinite alternate;
}

.sl1.show .btn-label {
  animation: fadeIn 0.8s ease-out 2.8s forwards;
}

.sl2 {
  opacity: 0;
}

.sl2.show {
  animation: fadeIn3 0.8s ease-out 2.5s forwards;
}

.sl2.show svg {
  animation:
    fadeIn3 0.8s ease-out 2.5s forwards,
    bounce 1s ease-in-out 3.2s forwards;
}

.sl2.show .btn-label {
  animation: fadeIn 0.8s ease-out 3.2s forwards;
}

.up1 {
  opacity: 0;
}

.up1.show {
  animation: fadeIn3 0.8s ease-out 2.8s forwards;
}

.up1.show svg {
  animation:
    fadeIn3 0.8s ease-out 2.8s forwards,
    bounce 1s ease-in-out 3.6s forwards;
}

.up1.show .btn-label {
  animation: fadeIn 0.8s ease-out 3.6s forwards;
}

.sl3 {
  opacity: 0;
}

.sl3.show {
  animation: fadeIn3 0.8s ease-out 4s forwards;
}

.sl3.show svg {
  animation:
    fadeIn3 0.8s ease-out 4s forwards,
    bounce 1s ease-in-out 4.7s forwards;
}



.sl3.show .btn-label {
  animation: fadeIn 0.8s ease-out 4.7s forwards;
}


.up2 {
  opacity: 0;
}

.up2.show {
  animation: fadeIn3 0.8s ease-out 4.3s forwards;
}

.up2.show svg {
  animation:
    fadeIn3 0.8s ease-out 4.3s forwards,
    bounce 1s ease-in-out 5.1s forwards;
}



/* Sincronizzazione Testo Slide 3 e 4 (Ritardo 6s come le frecce) */
.up2.show .btn-label {
  animation: fadeIn 0.8s ease-out 5.1s forwards;
}



.sl4 {
  opacity: 0;
}

.sl4.show {
  animation: fadeIn3 0.8s ease-out 4s forwards;
}

.sl4.show svg {
  animation:
    fadeIn3 0.8s ease-out 4s forwards,
    bounce 1s ease-in-out 4.8s forwards;
}

.sl4.show .btn-label {
  animation: fadeIn 0.8s ease-out 4.7s forwards;
}


.up3 {
  opacity: 0;
}

.up3.show {
  animation: fadeIn3 0.8s ease-out 4.3s forwards;
}

.up3.show svg {
  animation:
    fadeIn3 0.8s ease-out 4.3s forwards,
    bounce 1s ease-in-out 5.1s forwards;
}



/* Sincronizzazione Testo Slide 3 e 4 (Ritardo 6s come le frecce) */
.up3.show .btn-label {
  animation: fadeIn 0.8s ease-out 5.1s forwards;
}


.sl5 {
  opacity: 0;
}

.sl5.show {
  animation: fadeIn3 0.8s ease-out 4s forwards;
}

.sl5.show svg {
  animation:
    fadeIn3 0.8s ease-out 4s forwards,
    bounce 1s ease-in-out 4.8s forwards;
}

.sl5.show .btn-label {
  animation: fadeIn 0.8s ease-out 4.7s forwards;
}

.sl6 {
  opacity: 0;
}

.sl6.show {
  animation: fadeIn3 0.8s ease-out 4s forwards;
}

.sl6.show svg {
  animation:
    fadeIn3 0.8s ease-out 4s forwards,
    bounce 1s ease-in-out 4.8s forwards;
}

.sl6.show .btn-label {
  animation: fadeIn 0.8s ease-out 4.7s forwards;
}


.up4 {
  opacity: 0;
}

.up4.show {
  animation: fadeIn3 0.8s ease-out 4.3s forwards;
}

.up4.show svg {
  animation:
    fadeIn3 0.8s ease-out 4.3s forwards,
    bounce 1s ease-in-out 5.1s forwards;
}



/* Sincronizzazione Testo Slide 3 e 4 (Ritardo 6s come le frecce) */
.up4.show .btn-label {
  animation: fadeIn 0.8s ease-out 5.1s forwards;
}


.sl7 {
  opacity: 0;
}

.sl7.show {
  animation: fadeIn3 0.8s ease-out 4.2s forwards;
}

.sl7.show svg {
  animation:
    fadeIn3 0.8s ease-out 4.2s forwards,
    bounce 1s ease-in-out 5s forwards;
}

.sl7.show .btn-label {
  animation: fadeIn 0.8s ease-out 5s forwards;
}

.sl8 {
  opacity: 0;
}

.sl8.show {
  animation: fadeIn3 0.8s ease-out 4s forwards;
}

.sl8.show svg {
  animation:
    fadeIn3 0.8s ease-out 4s forwards,
    bounce 1s ease-in-out 4.8s infinite alternate;
}

.sl8.show .btn-label {
  animation: fadeIn 0.8s ease-out 4.7s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
    backdrop-filter: blur(8px);
  }
}

@keyframes fadeIn2 {
  to {
    opacity: 1;
    transform: translateY(-200%);
  }
}

@keyframes fadeIn3 {
  from {
    opacity: 0;
    transform: translateY(2vh);
  }

  to {
    opacity: 1;
    transform: translateY(0vh);
  }
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(2vh);
  }
}




.skipBtn {
  position: absolute;
  bottom: 10%;
  right: 12%;
  border: solid 0.03125rem #313131;
  background-color: #E7E1D1;
  padding: 1vh;
  text-decoration: none;
  color: #313131;
  opacity: 0;
  animation: fadeIn 0.8s ease-in-out 2s forwards;
}


#title_page button a {
  text-decoration: none;
  color: #313131;
  font-size: 2vh;
}

.bg_wrapper {
  background-image: url(assets/Group\ 38.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: 1s ease-out 0.8s;
  opacity: 0;
}

.bg_wrapper.show {
  opacity: 1;

}

.explanation {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  color: #313131;
  width: 50vw;
  font-size: 2.2vh;
  text-align: center;
  opacity: 0;
  transform: translateY(8vh);
  transition: 1s ease-out 1.5s;
  transition-delay: 1s;
  line-height: 170%;
  pointer-events: none;
}

.text span#explanationItalic {
  /*font-style: italic;*/
  font-weight: bold;
}

.text.show {
  opacity: 1;
  transform: translateY(2vh);
}

.explanation2 {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.text2 {
  color: #313131;
  width: 100vw;
  font-size: 2.2vh;
  text-align: center;
  opacity: 0;
  transform: translateY(38vh);
  transition: 1s ease-out;
  transition-delay: 2s;
}

.text2.show {
  opacity: 1;
  transform: translateY(36vh);

}

.text2 span#conclusionItalic {
  /*font-style: italic;*/
  font-weight: bold;
}

.pointer {
  position: absolute;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  border: solid 0.25rem #81201A;
  left: 48%;
  transform: translateY(46vh) scale(0);
  transition: transform 0.5s ease-out 1s;
}

.pointer.show {
  transform: translateY(46vh) scale(1);
  animation: bounceScale 0.5s ease-out 1.4s;
}

@keyframes bounceScale {
  0% {
    transform: translateY(46vh) scale(1);
  }

  60% {
    transform: translateY(46vh) scale(1.2);
  }

  80% {
    transform: translateY(46vh) scale(0.9);
  }

  100% {
    transform: translateY(46vh) scale(1);
  }
}

.pointer2 {
  opacity: 0;
  position: absolute;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  background-color: #81201A;
  left: 90%;
  transform: translateY(65vh);
  transition: 0.5s ease-out 3s;

}

.pointer2.show {
  transform: translateY(46vh);
  left: 43%;
  opacity: 1;
  animation: bounceLeft 1s ease 3.49s forwards;
}

@keyframes bounceLeft {
  to {
    left: 44%;
    transform: translateY(46vh);
  }
}

.pointer3 {
  opacity: 0;
  position: absolute;
  width: 8vh;
  height: 8vh;
  border-radius: 50%;
  background-color: #81201A;
  left: 10%;
  transform: translateY(65vh);
  transition: 0.5s ease-out 3s;

}

.pointer3.show {
  transform: translateY(46vh);
  left: 51%;
  opacity: 1;
  animation: bounceRight 1s ease 3.49s forwards;
}

@keyframes bounceRight {
  to {
    left: 50%;
    transform: translateY(46vh);
  }
}

.text3 {
  color: #313131;
  width: 50vw;
  font-size: 2.2vh;
  text-align: center;
  opacity: 0;
  transform: translateY(50vh);
  transition: 1s ease-out;
  transition-delay: 4s;
}

.text3.show {
  opacity: 1;
  transform: translateY(48vh);
}

.explanation3 {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;


}

/* STILE SLIDE 4 CORRETTO */

.explanation4 {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3vh;
}

.text6 {
  color: #313131;
  width: 60vw;
  font-size: 2.2vh;
  text-align: center;
  line-height: 170%;
  margin-bottom: 10vh;

  /* Animazione */
  opacity: 0;
  transform: translateY(3vh);
  transition: 1s ease-out;
  transition-delay: 1s;


  margin: 0;
  position: relative;
  z-index: 2;
}

.text6.show {
  opacity: 1;
  transform: translateY(0);
}

.text6.delay-text {
  transition-delay: 2.5s;
}

#conclusionItalic {
  font-weight: bold;
}

/* Container Slide 3b */
.explanation5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1vh;
}

/* Il contenitore principale della slide */
.explanation5 {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* IL WRAPPER CHE STRINGE IL TESTO AL VIDEO */
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0vh;
  /* Distanza tra testo e video */
  max-height: 60vh;
  z-index: 5;
}

/* Stile testi */
.text7 {
  margin: 0 !important;
  color: #313131;
  width: 45vw;
  font-size: 2.1vh;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Video: */
.demo-video {
  max-width: 5vw;
  max-height: 0vh;
  height: auto;
  border-radius: 6px;
  background-color: #313131;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Animazioni quando la slide è visibile */
.explanation5.show .text7.instruction-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.explanation5.show .text7.second-part {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.3s;
}

/* Stile dei pallini */
.scale-dots {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.dot {
  border-radius: 50%;
  display: inline-block;
}

.d1 {
  width: 0.625rem;
  height: 0.625rem;
  background-color: #4d4d4d;
  opacity: 0.6;
}

.d2 {
  width: 15px;
  height: 15px;
  background-color: #4d4d4d;
  opacity: 0.3;
}

.d3 {
  width: 22px;
  height: 22px;
  background-color: #4d4d4d;
  opacity: 0.3;
}

.d4 {
  width: 30px;
  height: 30px;
  background-color: #4d4d4d;
  opacity: 0.3;
}

.d5 {
  width: 2.25rem;
  height: 2.25rem;
  background-color: #4d4d4d;
  opacity: 0.6;
}

/* Contenitore principale: dispone i due gruppi affiancati */
.status-illustration {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 4vh;
  margin-bottom: 2vh;

  /* Animazione coerente con il tuo stile */
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease-out 1.8s;
}

/* Quando la slide 4 è attiva, mostra l'illustrazione */
.explanation4.show .status-illustration {
  opacity: 1;
  transform: translateY(0);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 2.1vh;
}

/* Dimensione delle sfere */
.statusSphere {
  width: 2.5vh;
  height: 2.5vh;
  border-radius: 50%;
  display: inline-block;
}

/* Labels e Freccia */
.scale-labels {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.9rem;
  color: #313131;
}

.arrow-svg {
  width: 120px;
  height: 20px;
}


#s5 {
  position: absolute;
  left: 46%;
  bottom: 10%;
}

@keyframes bounceRight {
  to {
    left: 50%;
    transform: translateY(46vh);
  }
}

#falseControls {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 8vh);
  display: flex;
  align-items: center;
  gap: 4rem;
  /* distanza tra bottone e timeline */
  opacity: 0;
  transition: 0.5s ease;
  transition-delay: 1s;
}

#falseControls.show {
  transform: translate(-50%, 6vh);
  opacity: 1;
}

#falseControls.show .falseBtn,
#falseControls.show .falseTimeLine {
  opacity: 1;
}

.falseBtn {
  position: relative;
  background-color: #E7E1D1;
  width: 4vh;
  height: 4vh;
  border: solid 0.5px #313131;
  padding: 0.5em 1em 0.5em 1em;
  scale: 1;
  transition: 0.5s ease;
  transition-delay: 1s;
}

.falseBtn svg {
  width: 100%;
  height: 100%;
  fill: #313131;
}

#falseControls.show .falseBtn {
  opacity: 1;
  animation: click 0.5s ease 2.5s forwards;
}

#falseControls.show .falseBtn .pauseIcon {
  position: absolute;
  left: 25%;
}

#falseControls.show .falseBtn .pauseIcon svg {
  fill: #E7E1D1;
  opacity: 0;
  animation: showing 0.5s ease 2.8s forwards;
}

.pauseIcon svg {
  width: 100%;
  height: 100%;
}

.text6.show {
  opacity: 1;
  transform: translateY(2vh);
}

.text6 span#explanationItalic {
  font-weight: bold;
}

.sl5.show svg {
  animation:
    fadeIn3 3s ease-out 3s forwards,
    bounce 1s ease-in-out 3.8s infinite alternate;
}

/* Fa apparire il testo "BACK" e "EXPLORE" insieme alle frecce */
.sl5.show .btn-label {
  animation: fadeIn 3s ease-out 3s forwards;
}

@keyframes click {
  0% {
    scale: 1;
    background-color: #E7E1D1;
  }

  50% {
    scale: 0.6;
    background-color: #E7E1D1;
  }

  100% {
    scale: 1;
    background-color: #313131;
  }
}

@keyframes showing {
  to {
    opacity: 1;
  }
}

.falseTimeLine {
  position: relative;
  width: 65vh;
  height: 5vh;
  border: solid 5px #E7E1D1;
  box-shadow: 0 0 0 1px #313131;
  z-index: 1;
  /*opacity: 0;*/
  transition: 0.5s ease;
  transition-delay: 1s;
}

.falseTimeLine.show .thumb {
  position: absolute;
  width: 5vh;
  height: 5vh;
  background-color: #313131;
  right: 95%;
  border: solid 5px #E7E1D1;
  box-shadow: 0 0 0 1px #313131;
  border-radius: 50%;
  scale: 1.4;
  z-index: 3;
  animation: thumbMove 1.5s ease 3s forwards;
}

.falseTimeLine.show .progress {
  display: inline-block;
  width: 2vh;
  height: 5vh;
  background-color: #313131;
  z-index: 2;
  animation: progression 1.5s ease 3.01s forwards;
}


@keyframes thumbMove {
  to {
    right: 25%;
  }
}

@keyframes progression {
  to {
    width: 45vh;
  }
}

/* STILE SLIDE 3B - VIDEO DEMO */

.explanation5 {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3vh;
  background-color: transparent;
}

.demo-video {
  max-width: 20vw;
  max-height: 75vh;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
  background-color: #313131;
  clip-path: inset(1px);
}

.explanation5.show .demo-video {
  opacity: 1;
  transform: scale(1);
}

.demo-video::-webkit-media-controls {
  display: none;
}

/* Mostra i controlli se necessario */
.demo-video[controls] {
  outline: none;
}

/* Frecce slide 3b ereditate da .SlideBtn e .UpperSlide */

@keyframes showing {
  to {
    opacity: 1;
  }
}

/* Standardizzazione Pulsanti Navigazione */

/* Base comune per i pulsanti */
.SlideBtn,
.UpperSlide {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  z-index: 50;
}

/* Allontana la freccia BACK verso l'alto */
.UpperSlide {
  top: 17% !important;
}

/* Allontana la freccia NEXT/EXPLORE verso il basso */
.SlideBtn {
  bottom: 15% !important;
}

/* Stato iniziale comune per tutte le etichette */
.btn-label {
  font-family: "montserrat", sans-serif;
  font-size: 1.4vh;
  font-weight: 350;
  color: #313131;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: -1vh;
  opacity: 0;
}

.text5 {

  color: #313131;
  width: 50vw;
  font-size: 2.2vh;
  text-align: center;
  opacity: 0;
  transform: translateY(14vh);
  transition: 1s ease-out;
  transition-delay: 3.6s;
  line-height: 170%;
}

.text5 span#conclusionItalic {
  /*font-style: italic;*/
  font-weight: bold;
}

.text5.show {
  opacity: 1;
  transform: translateY(12vh);
}


.subText {
  position: absolute;
  right: 20%;
  bottom: 15%;
  width: 35vh;
  text-align: center;
}

.subText2 {
  position: absolute;
  left: 20%;
  bottom: 15%;
  width: 35vh;
  text-align: center;
}

#container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#time_view canvas {
  z-index: 1;
}


#checkmark p {
  position: relative;
  transition: 0.2s ease;
}


#generalBtn {
  position: absolute;
  right: 25%;
  bottom: 30%;
  opacity: 0;

}

#cb1:checked {
  left: 8%;
  transform: translateX(-8%);
}

input[type="range"] {

  -webkit-appearance: none;
  appearance: none;
  width: 65%;
  height: 1.25rem;
  background: transparent;
  margin: 0.625rem 0;

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 1.875rem;
    cursor: pointer;
    background: transparent;
    border: 0.0625rem solid #313131;
    box-shadow: none;
    position: relative;
  }

  &::-moz-range-track {
    width: 100%;
    height: 1.875rem;
    cursor: pointer;
    background: transparent;
    border: 0.0625rem solid #313131;
    box-shadow: none;
    position: relative;
  }

  &::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #313131;
    border: solid 0.125rem #E7E1D1;
    box-shadow: 0 0 0 0.6px #313131;
    cursor: pointer;
    scale: 2 2;
    position: relative;
    transform: translateY(0.2vh);
    opacity: 0;
    transition: 0.2s ease;

  }

  &::-moz-range-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #313131;
    border: solid 0.125rem #E7E1D1;
    box-shadow: 0 0 0 1px #313131;
    cursor: pointer;
    scale: 2 2;
    position: relative;
    transform: translateY(0.2vh);
    opacity: 0;
    transition: 0.2s ease;

  }
}

input[type="range"]:hover {
  &::-webkit-slider-thumb {
    opacity: 1;
  }

  &::-moz-range-thumb {
    opacity: 1;
  }
}

h1.legenda {
  font-family: "benton-modern-display", serif;
  font-weight: 400;
  font-style: italic;
}

/* Stile per la legenda */

/* legenda colonizzatori */
#legenda {
  position: absolute;
  bottom: 3%;
  left: 8%;
  width: fit-content;
  height: fit-content;
  padding: 1vh;
  /* Ridotto da 2vh */
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
}

#legenda h1 {
  grid-column: 1 / -1;
}

#legenda ul {
  list-style: none;
  margin: 0;
  padding-left: 1rem;
  border-left: solid 1px #313131;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 1rem;
  column-gap: 2rem;
}

#legenda ul li {
  margin-bottom: 0.2vh;
}

.legendSphere {
  display: inline-block;
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  margin-right: 1.5vh;
  transform: translateY(0.5vh);


}

#legenda ul li:nth-child(1) .legendSphere {
  border: solid 0.125rem #81201A;
}

#legenda ul li:nth-child(2) .legendSphere {
  border: solid 0.125rem #4D4871;
}

#legenda ul li:nth-child(3) .legendSphere {
  border: solid 0.125rem #E3BC47;
}

#legenda ul li:nth-child(4) .legendSphere {
  border: solid 0.125rem #99AB59;
}

#legenda ul li:nth-child(5) .legendSphere {
  border: solid 0.125rem #8799BD;
}

#legenda ul li:nth-child(6) .legendSphere {
  border: solid 0.125rem #CA5D84;
}

#legenda ul li:nth-child(7) .legendSphere {
  border: solid 0.125rem #D97963;
}

#legenda ul li:nth-child(8) .legendSphere {
  border: solid 0.125rem #7EC1AF;
}

/* legenda durata */
#sizeScale {
  margin-top: 3vh;
  padding: 0;
}

#sizeScale h1 {
  text-align: left;
  margin: 0 0 0.5rem 0;
  margin-bottom: 2vh;
}

.scaleBoxes {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  border-left: 0.0625rem solid #313131;
  padding-left: 1rem;
  margin-left: 0;
}

.scaleItem {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 4rem;
  box-sizing: border-box;
  padding-bottom: 1.5rem;

}

.scaleSphere {
  border-radius: 50%;
  background-color: #4d4d4d;
  opacity: 0.6;
  flex-shrink: 0;

}

.scaleSphere.small {
  width: 0.625rem;
  height: 0.625rem;
}

.scaleSphere.large {
  width: 2.25rem;
  height: 2.25rem;
}

.scaleSphere.intermediate {
  background-color: #4d4d4d;
  opacity: 0.3;
}

.scaleLabelArrow {
  width: 5rem;
  height: auto;
  display: block;
  margin: -0.5rem auto 0;
  margin-left: 3.5rem;
  position: relative;
  z-index: 5;
}

.scaleLabelArrow line {
  stroke: #4d4d4d;
}

.scaleLabelArrow polygon {
  fill: #4d4d4d;
}

.scaleLabel {
  font-size: 0.9em;
  white-space: nowrap;
  margin: 0;
  margin-left: 0.5rem;
  text-align: center;
  position: absolute;
  bottom: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
}

/* legenda */
#status {
  margin-top: 3vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#status h1 {
  text-align: left;
  margin: 0 0 0.5rem 0;
  margin-bottom: 2vh;
}

#status ul {
  list-style: none;
  margin: 0;
  padding-left: 1rem;
  border-left: solid 1px #313131;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 1rem;
}

#status ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.2vh;
}

.statusSphere {
  display: inline-block;
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  margin-right: 1.5vh;
  flex-shrink: 0;
}

.statusSphere.notColonized {
  background-color: #B8B8B8;
}

.statusSphere.decolonized {
  background-color: #4d4d4d;
}


/* PAGINA TEAM */
.team {
  padding: 31.25rem 0;
  position: relative;
  width: 37.5rem;
  height: 37.5rem;
  margin: 6.25rem auto;
}

/* CERCHI */
.member {
  width: 6.875rem;
  height: 6.875rem;
  border-radius: 50%;
  position: absolute;
  top: 31.25rem;
  left: 12.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* AREA CENTRALE (TEAM) */
.main {
  flex-grow: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  /* BILANCIARE L'ALTEZZA DEL MENU */
  padding-top: 10%;
}

.dotted-ring {

  position: absolute;
  width: 46.875rem;
  height: 46.875rem;
  top: 48%;
  left: 54%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;

  background-image: url('assets/cerchio3b.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;


}

/* CONTENITORE DELLE BOLLE */
.bubble-container {
  position: relative;
  width: 37.5rem;
  height: 46.875rem;
  z-index: 1;

}

/* STILE GENERALE DELLE BOLLE */
.bubble {
  border-radius: 50%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);  Ombra leggera */
  transition: all 0.3s ease;
  /* Animazione fluida */
  cursor: pointer;
}

/* Effetto Hover */
.bubble:hover {
  transform: scale(1.5);
  z-index: 10;
}

/* Testo dentro le bolle */

.bubble h4 {
  font-size: 0.9rem;
  color: #fff;
  margin: 0;
  padding: 0 0.625rem;

  /* VISIBILE di default */
  opacity: 1;
  transition: opacity 0.3s ease;

  /* Posizionamento per centratura perfetta */
  position: absolute;
  z-index: 2;
}

.bubble p {
  font-size: 0.65rem;
  /* Leggermente più grande per leggibilità */
  color: #fff;
  margin: 0;
  padding: 0 0.625rem;
  line-height: 1.2;

  /* NASCOSTO di default */
  opacity: 0;
  transition: opacity 0.3s ease;

  /* Posizionamento per centratura perfetta */
  position: absolute;
  z-index: 2;
}

/* hover*/

/* Quando vai sopra col mouse: NASCONDI H4 */
.bubble:hover h4 {
  opacity: 0;
}


.bubble:hover p {
  opacity: 1;
}

.bubble-container:has(.bubble:hover) .bubble:not(:hover) {
  opacity: 0.2;
}

.bubble:hover {
  opacity: 1 !important;
  transform: scale(1.5);
  z-index: 10;
  border-radius: 50%;
}

.dotted-ring {
  pointer-events: none;
}

/* posizionamento e colori superfici */

/* 1. Bolla Gialla */
.b-yellow {
  width: 170px;
  height: 170px;
  background-color: #C49A00;
  /*top: 20%;
            left: 10%;*/
  top: 65%;
  left: 40%;
}

/* 2. Bolla Verde chiaro (in alto) */
.b-green-light {
  width: 170px;
  height: 170px;
  background-color: #99AB59;
  /*top: 10%;
            left: 40%;*/
  top: 37%;
  left: 40%;
}

/* 3. Bolla Rosa (destra) */
.b-pink {
  width: 170px;
  height: 170px;
  background-color: #CA5D84;
  /*top: 20%;
            left: 70%;*/
  top: 10%;
  left: 40%;
}

/* 4. Bolla Verde acqua (centro) */
.b-teal {
  width: 170px;
  height: 170px;
  background-color: #8799BD;
  /*top: 37%;
            left: 40%;*/
  top: 20%;
  left: 10%;
}

/* 5. Bolla viola (basso destra) */
.b-terra {
  width: 170px;
  height: 170px;
  background-color: #4D4871;
  top: 50%;
  left: 70%;
}

/* 6. Bolla AZZURRA (basso centro) */
.b-purple {
  width: 170px;
  height: 170px;
  background-color: #81201A;
  /*top: 65%;
            left: 40%;*/
  top: 50%;
  left: 10%;
}

/* 7. Bolla Rosa pesca (basso sinistra) */
.b-peach {
  width: 170px;
  height: 170px;
  background-color: #D97963;
  /*top: 50%;
            left: 10%;*/
  top: 20%;
  left: 70%;
}


/*  DATA AND METHODOLOGY PAGE    */


body[data-page="data-page"] {
  color: #1a1a1a;
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden;
}

.data-methodology {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 2rem;
  z-index: 2;
}

.data-methodology h1 {
  font-family: "benton-modern-display", serif;
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 5rem;
  color: #000;
  letter-spacing: 0.5px;
}

.circle-section {
  position: relative;
  width: 28.125rem;
  height: 28.125rem;
  border-radius: 50%;
  margin: 0.1rem auto;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(231, 225, 209, 0.8);
  backdrop-filter: blur(6px);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  font-family: "Montserrat", sans-serif;
}

.circle-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  /* dimensione singolo pallino */
  height: 0.5rem;
  border-radius: 50%;
  background-color: transparent;
  transform: translate(-50%, -50%);
  z-index: -1;

  /* bordo di pallini perfettamente allineati lungo la circonferenza — 72 pallini */
  box-shadow:
    0 -260px rgba(0, 0, 0, 0.15),
    23px -259px rgba(0, 0, 0, 0.15),
    45px -256px rgba(0, 0, 0, 0.15),
    68px -252px rgba(0, 0, 0, 0.15),
    90px -246px rgba(0, 0, 0, 0.15),
    112px -238px rgba(0, 0, 0, 0.15),
    130px -230px rgba(0, 0, 0, 0.15),
    145px -220px rgba(0, 0, 0, 0.15),
    165px -210px rgba(0, 0, 0, 0.15),
    180px -195px rgba(0, 0, 0, 0.15),
    195px -180px rgba(0, 0, 0, 0.15),
    208px -165px rgba(0, 0, 0, 0.15),
    220px -145px rgba(0, 0, 0, 0.15),
    230px -130px rgba(0, 0, 0, 0.15),
    238px -112px rgba(0, 0, 0, 0.15),
    245px -90px rgba(0, 0, 0, 0.15),
    250px -65px rgba(0, 0, 0, 0.15),
    254px -45px rgba(0, 0, 0, 0.15),
    256px -23px rgba(0, 0, 0, 0.15),
    256px 0 rgba(0, 0, 0, 0.15),
    256px 23px rgba(0, 0, 0, 0.15),
    254px 45px rgba(0, 0, 0, 0.15),
    250px 65px rgba(0, 0, 0, 0.15),
    245px 90px rgba(0, 0, 0, 0.15),
    238px 112px rgba(0, 0, 0, 0.15),
    230px 130px rgba(0, 0, 0, 0.15),
    220px 145px rgba(0, 0, 0, 0.15),
    208px 165px rgba(0, 0, 0, 0.15),
    195px 180px rgba(0, 0, 0, 0.15),
    180px 195px rgba(0, 0, 0, 0.15),
    165px 210px rgba(0, 0, 0, 0.15),
    145px 220px rgba(0, 0, 0, 0.15),
    130px 230px rgba(0, 0, 0, 0.15),
    112px 238px rgba(0, 0, 0, 0.15),
    90px 246px rgba(0, 0, 0, 0.15),
    68px 252px rgba(0, 0, 0, 0.15),
    45px 256px rgba(0, 0, 0, 0.15),
    23px 259px rgba(0, 0, 0, 0.15),
    0 260px rgba(0, 0, 0, 0.15),
    -23px 259px rgba(0, 0, 0, 0.15),
    -45px 256px rgba(0, 0, 0, 0.15),
    -68px 252px rgba(0, 0, 0, 0.15),
    -90px 246px rgba(0, 0, 0, 0.15),
    -112px 238px rgba(0, 0, 0, 0.15),
    -130px 230px rgba(0, 0, 0, 0.15),
    -145px 220px rgba(0, 0, 0, 0.15),
    -165px 210px rgba(0, 0, 0, 0.15),
    -180px 195px rgba(0, 0, 0, 0.15),
    -195px 180px rgba(0, 0, 0, 0.15),
    -208px 165px rgba(0, 0, 0, 0.15),
    -220px 145px rgba(0, 0, 0, 0.15),
    -230px 130px rgba(0, 0, 0, 0.15),
    -238px 112px rgba(0, 0, 0, 0.15),
    -245px 90px rgba(0, 0, 0, 0.15),
    -250px 65px rgba(0, 0, 0, 0.15),
    -254px 45px rgba(0, 0, 0, 0.15),
    -256px 23px rgba(0, 0, 0, 0.15),
    -256px 0 rgba(0, 0, 0, 0.15),
    -256px -23px rgba(0, 0, 0, 0.15),
    -254px -45px rgba(0, 0, 0, 0.15),
    -250px -65px rgba(0, 0, 0, 0.15),
    -245px -90px rgba(0, 0, 0, 0.15),
    -238px -112px rgba(0, 0, 0, 0.15),
    -230px -130px rgba(0, 0, 0, 0.15),
    -220px -145px rgba(0, 0, 0, 0.15),
    -208px -165px rgba(0, 0, 0, 0.15),
    -195px -180px rgba(0, 0, 0, 0.15),
    -180px -195px rgba(0, 0, 0, 0.15),
    -165px -210px rgba(0, 0, 0, 0.15),
    -145px -220px rgba(0, 0, 0, 0.15),
    -130px -230px rgba(0, 0, 0, 0.15),
    -112px -238px rgba(0, 0, 0, 0.15),
    -90px -246px rgba(0, 0, 0, 0.15),
    -68px -252px rgba(0, 0, 0, 0.15),
    -45px -256px rgba(0, 0, 0, 0.15),
    -23px -259px rgba(0, 0, 0, 0.15);
}



/* Sfalsamento alternato */
.circle-section.left {
  margin-left: 1%;
}

.circle-section.right {
  margin-left: auto;
  margin-right: 1%;
}

/* Effetto comparsa scorrendo */
.fade-in {
  opacity: 0;
  transform: translateY(3.75rem);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


#dati_sfondo {
  width: 100vw;
  position: relative;
}

#defaultCanvas0 {
  position: absolute;
  top: 0;
  z-index: 1;

}

/* FOOTER STYLES */
footer {
  margin-top: 4.375rem;
  margin-bottom: 0px;
  background-color: #313131;
  border-top: 0.0625rem solid #E7E1D1;
  padding: 2rem 4vw;
  width: 100%;
  overflow-x: hidden;
}


.footer-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-header {
  position: relative;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
}

.footer-header::after {
  content: "";
  position: absolute;
  left: -4vw;
  bottom: 0;
  width: calc(100% + 8vw);
  height: 0.0625rem;
  background-color: #313131;
}

.course-title {
  font-family: "benton-modern-display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #E7E1D1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.course-info {
  font-size: 0.9rem;
  color: #E7E1D1;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.5fr;
  gap: 4rem;
  margin-bottom: 3rem;
  align-items: start;
  justify-items: flex-left;
}

.footer-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E7E1D1;
  margin-bottom: 1.25rem;
  border-bottom: 0.0625rem solid #E7E1D1;
  padding-bottom: 0.75rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  font-size: 0.85rem;
  line-height: 1.9;
  color: #E7E1D1;
}

.footer-section p {
  font-size: 0.85rem;
  line-height: 1.9;
  color: #E7E1D1;
}

#creative-commons {
  font-size: 0.60rem;
}

#creative-commons a {
  color: #E7E1D1;
  text-decoration: underline;
}


.footer-section.empty {
  display: flex;
  align-items: flex-end;
}


.footer-logos {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 0px;
  padding: 0;
  border: none;
  max-width: 100%;
}

.logo-placeholder {
  width: 8rem;
  aspect-ratio: 2/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1vh;
  color: #E7E1D1;
  flex-shrink: 0;
  transition: 0.3s ease;
}

.logo-placeholder img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

#poli img {
  max-width: 110%;
  max-height: 110%;
}

.footer-bottom {
  font-size: 0.75rem;
  color: #E7E1D1;
  text-align: left;
  border-top: 0.0625rem solid #E7E1D1;
  padding-top: 2.5rem;
  line-height: 1.8;
  margin-bottom: 0px;
  margin-right: 8vw;
}

/* REGOLE TIME VIEW */
#time_view {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#canvas_layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#ui_layer {
  position: absolute;
  bottom: 0rem;
  left: 66%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  pointer-events: auto;
  z-index: 1000;
}

/* posiziona play, slider e speed */
.control-bar {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-left: 0.4rem;
}

.left-buttons {
  margin-bottom: 1.2rem;
}

#slider_wrapper {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 500px;
}

/* posiziona year e tot colonies */
.stats-wrapper {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-bottom: 1rem;
  gap: 0.2rem;
}

.stat-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-family: 'montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #4d4d4d;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}

.stat-box-value {
  border: none;
  background: none;
  font-size: 1.4rem;
  font-weight: 700;
  color: #313131;
  line-height: 1;
  min-width: 4ch;
  max-width: 4ch;
  text-align: center;
  flex-shrink: 0;
}

.stat-separator {
  width: 1px;
  height: 50px;
  background-color: #313131;
  margin: 0 15px;
  align-self: center;
}


#playBtn {
  width: 0;
  height: 0;

  opacity: 0;
  z-index: 0;
  cursor: pointer;
  transition: 0.5s ease;
  pointer-events: none;
}

#playIcon,
#speedIcon {
  cursor: pointer;
  border: 0.0625rem solid #313131 !important;
  padding: 0.4rem 0.8rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: 0.2s ease;
}

#playIcon {
  padding: 0.3rem 0.6rem !important;
}

#playIcon:hover,
#speedIcon:hover {
  background-color: #313131 !important;
  color: #E7E1D1 !important;
}

#playIcon:hover svg {
  fill: #E7E1D1 !important;
}

#playIcon svg {
  display: block !important;
}

#playSvg {
  fill: #313131;
}

#pauseIcon {
  opacity: 0;
  transition: 0.2s ease;
  z-index: 30;
  position: absolute;
}

#pauseIcon>svg {
  fill: #E7E1D1;
}

#playIcon:hover {
  background-color: #4d4d4d;
}

#playIcon:hover #playSvg {
  fill: #E7E1D1;
}

#playBtn:checked+#playIcon {
  background-color: #313131;
  z-index: 20;
}

#playBtn:checked+#playIcon #playSvg {
  opacity: 0;
}

#playBtn:checked+#playIcon #pauseIcon {
  opacity: 1;
}

#speedBtn {
  width: 0;
  height: 0;
  opacity: 0;
  z-index: 0;
  cursor: pointer;
  transition: 0.5s ease;
  pointer-events: none;
}

#speedIcon:hover {
  background-color: #4d4d4d;
  color: #E7E1D1;
}

#speedBtn:checked+#speedIcon {
  background-color: #313131;
  color: #E7E1D1;
}

#counter-colonies {
  min-width: 4.375rem;
  margin-bottom: 0.8rem;
}

#playIcon,
#speedIcon {
  cursor: pointer;
  border: 0.0625rem solid #313131;
  padding: 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: 0.2s ease;
}

#speedIcon {
  transition: 0.2s ease;
  z-index: 20;
  font-size: 1rem;
  font-weight: bold;
  color: #3131318c;
}

#playIcon:hover,
#speedIcon:hover {
  background-color: #313131;
  color: #E7E1D1;
}

#playIcon:hover svg {
  fill: #E7E1D1;
}

#playIcon svg {
  display: block;
}


.re-watch {
  display: flex;
  position: absolute;
  top: 15%;
  right: 5%;
  border: solid #313131 0.6px;
  width: fit-content;
  height: fit-content;
  padding: 0.4rem;
  background-color: #E7E1D1;
  z-index: 999;
  transition: 0.2s ease;
}

.re-watch svg {
  fill: #313131;
}

.re-watch:hover {
  background-color: #313131;
}


.re-watch:hover svg {
  fill: #E7E1D1;
}

.re-watch::before {
  content: 'Watch Introduction';
  color: #E7E1D1;
  background-color: #313131;
  font-size: 0.6rem;
  padding: 0.2rem 0.3rem;
  position: absolute;
  top: 120%;
  right: -100%;
  pointer-events: none;
  width: 6rem;
  opacity: 0;
  transition: 0.2s ease;


}

.re-watch:hover::before {
  opacity: 1;
}

#data-page-link a {
  color: #313131;
}