/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #272333;
  color: black;
  font-family: "Texte";
  cursor: url("/Icons/WindowArrow.png"), auto;
}

a, button {
cursor: url("/Icons/WindowArrow.png"), pointer;
}

iframe {
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.video-player {

width: 280px;

height: 150px;

}

.video-player iframe {

width: 100%;
height: 100%;
border: 3;
border-radius: 10px;

}

.Downtown {

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  z-index: 999;
    
    opacity: 0;
    transition: opacity 3s ease;

}

.Downtown2 {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  z-index: 999;

}

.Downtown.visible {
    opacity: 1;
    
}

.Downtown iframe {

width: 100%;

height: 100%;

pointer-events: auto;
z-index: 10;

}

.Downtown2 iframe {

width: 100%;

height: 100%;

pointer-events: auto;
z-index: 10;

}

.note1 {
    position: fixed;
    top: 0;
    left: 1%;
    width: 100%;      /* largeur complète */
    height: 100%;     /* hauteur complète */
    flex-direction: column;
    
    opacity: 0;                /* invisible au départ */
    transition: opacity 3s ease; /* animation d'apparition */
}

.note1.visible {
    opacity: 1;                /* devient visible */
    transform: translateX(0) scale(1);
}

.note2 {
    position: fixed;
    top: 9%;
    left: 36%;
    width: 100%;      /* largeur complète */
    height: 100%;     /* hauteur complète */
    flex-direction: column;
    
    opacity: 0;                /* invisible au départ */
    transition: opacity 3s ease; /* animation d'apparition */
}

.note2.visible {
    opacity: 1;                /* devient visible */
    transform: translateX(0) scale(1);
}

.BD {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  object-fit: cover;
    
  opacity: 0;
  transition: opacity 3s ease;
}

.BD.visible {
opacity: 1;
pointer-events: none;
}

/* Chapitres */

.Chapitres {
    position: absolute;
    top: 32%;
    right:444px;
    max-width: 400px;

    
    opacity: 1;
    transition: opacity 3s ease;
}

.Chapitres img {
    
    margin-bottom: 20%;
    cursor: pointer;
}

/* Capitolium */

.Galleries {
    position:fixed;
    top: 20%;
    right:444px;
    max-width: 400px;

    
    opacity: 1;
    transition: opacity 3s ease;
}