body,
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}











h1, p {
font-size: 5vh;
  animation: policelight 3s linear infinite;
}

h1.last-text, p.last-text{
  opacity: 50%;
  filter: grayscale(1);
}





@keyframes policelight {
  0% {
    color: rgb(255, 0, 0);
  }

  50% {
    color: rgb(4, 0, 255);
  }

  100% {
    color: rgb(255, 0, 0);
  }
}


.animated-text-strip {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: hidden;
  bottom: 0;
}

.animated-text-strip {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: hidden;
  position: fixed;
  /* Fixe l'élément en bas de la page */
  bottom: 0;
  /* Positionne l'élément en bas */
  width: 100%;
  /* Assure que l'élément prend toute la largeur de la page */
  z-index: 1000;
  /* Assure que l'élément est au-dessus des autres */
}

.animated-text-strip .marquee {
  white-space: nowrap;
  animation: marquee 3s linear infinite;
  /* Gardez la durée de l'animation à 1s */
  max-width: none;
  color: bisque;
  /* La propriété bottom n'est pas nécessaire ici */
}

#text-strip-1 {
  background-color: rgb(0, 0, 255);
}

#text-strip-2 {
  background-color: blue;
}

#text-strip-3 {
  background-color: orangered;
}

@keyframes marquee {
  0% {
    transform: translate(-100%, 0);
    /* Commencez à gauche */
  }

  100% {
    transform: translate(0%, 0);
    /* Terminez à droite */
  }
}


























body {
  font-family: "Baskerville", serif;
}

@font-face {
  font-family: "Baskerville";
  src: url(../fonts/MBaskerville-Bold.otf) format("opentype");
}

#title {
  height: 100vh;
  font-size: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
}



h1 {
  font-size: 5vh;
  font-family: Baskerville;
  justify-content: center;
  color: bisque;
  align-items: center;
}

p {
    font-size: 5vh;
    font-family: Baskerville;
    justify-content: center;
    align-items: center;
    color: bisque;
    z-index: 2;
    align-items: center;
    text-align: center;
}

.click.h1 {
  position: absolute;
  display: flex;
  align-items: center;
}



.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#kane-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.appearing-element {
  pointer-events: all;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
}

.appearing-element.move {
  transform-origin: center center;
  animation-name: rotateAndScale;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
  animation-fill-mode: forwards;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.panel-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 5vh;
  color: bisque;
}

.panel-2 img {
  height: 50vh;
  transform: translate(-10%, -10%) rotate(15deg);
}

.panel-2 h1 {
  font-size: 5vh;
}



.appearing-element.move.panel-3{
  transform-origin: 30vw 30vh;
}

.appearing-element.move.panel-4 {
  transform-origin: 50vw 95vh;
}


.panel-3 img {
  height: 50vh;
  top: 30%;
  left: 50%;
  transform: translate(10%, 10%) rotate(15deg);
}

    .panel-3 h1 {
        height: 50vh;
        top: 30%;
        left: 50%;
        transform: translate(10%, 10%) rotate(15deg);
        font-size: 5vh;
    }

.panel-4 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
}

.panel-4 h1 {
  margin-bottom: 20px;
  color: bisque;
  text-align: center;
  font-size: 5vh;
}

.panel-5 img {
    height: 50vh;
    font-size: 5vh;
}

    .panel-5 h1 {
      bottom: 0;
      font-size: 5vh;
      text-align: center;
    }

.panel-6 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Aligner les enfants au bas du conteneur */
  align-items: center;
  /* Centrer horizontalement les enfants */
  height: 100vh;
  /* Assurez-vous que le conteneur prend toute la hauteur */
  position: relative;
  /* Nécessaire pour que les éléments positionnés en absolu se réfèrent à ce conteneur */
}

.panel-6 img {
  height: 50vh;
  /* Hauteur de l'image */
  position: absolute;
  /* Positionner l'image de manière absolue par rapport au conteneur */
  bottom: 0;
  /* Placer l'image au bas du conteneur */
  left: 50%;
  /* Centrer horizontalement */
  transform: translateX(-50%);
  /* Déplacer de moitié la largeur pour un centrage exact */
  z-index: 1;
  /* Assurez-vous que l'image soit en arrière-plan */
  transition: all 1s ease;
  /* Ajoutez une transition pour une apparition fluide */
}

.panel-6 h1 {
  position: relative;
  /* Positionner le texte relativement à son parent */
  z-index: 2;
  /* Assurez-vous que le texte soit au-dessus de l'image */
  color: bisque;
  /* Couleur du texte pour le rendre visible */
  text-align: center;
  /* Centrer le texte */
  margin-bottom: 10%;
  /* Ajuster la marge si nécessaire */
  font-size: 5vh;
}

.panel-7 .content {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.panel-7 h1 {
  position: absolute;
  right: 0;
  bottom: 20;
  /* Pour placer le texte juste en dessous de l'image */
  margin: 0;
  margin-top: 10px;
  /* Pour ajuster l'espace entre l'image et le texte */
  font-size: 5vh;
  text-align: center;
}

.panel-8 h1 {
  font-size: 4vh;
  margin-bottom: 10px;
  position: fixed;
  bottom: 20px;
  /* Ajustez cette valeur selon votre préférence */
  right: 20px;
  /* Ajustez cette valeur selon votre préférence */
  color: bisque;
  text-align: center;
}

.panel-7 img {
  height: 50vh;
  display: block;
  right: 0;
  margin: 0;
    margin-bottom: 10px;
  /* Pour s'assurer que l'image est un bloc et prend toute la largeur de son conteneur */
  position: absolute;
}





.panel-9 img {
  height: 35vh;
  left: 5%;
}

.panel-9 h1 {
  position: absolute;
  /* Utilisez position absolute pour positionner l'élément */
  top: 0;
  /* Alignez l'élément en haut du conteneur */
  left: 50%;
  /* Centrez l'élément horizontalement */
  transform: translateX(-50%);
  /* Ajustez le centrage horizontal */
  height: 40vh;
  /* Hauteur du texte */
  font-size: 5vh;
  /* Taille de la police */
  text-align: center;
  /* Centrer le texte */
  margin: 0;
  /* Réinitialiser les marges */
  margin-top: 50px;
  /* Ajuster l'espace si nécessaire */
  z-index: 2;
  /* Assurez-vous que le texte soit au-dessus de l'image */
}

.panel-10 h1 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: bisque;
  text-align: center;
  font-size: 5vh;
}

.panel-10 img {
  height: 60vh;
  position: relative;
  /* Si l'image est dans un conteneur, utilisez position: relative sur ce conteneur */
  display: block;
  margin: 0 auto;
  /* Pour centrer horizontalement l'image */
}

.panel-11 h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: bisque;
  text-align: center;
  font-size: 5vh;
}

.panel-11 img {
  height: 65vh;
  position: relative;
  /* Si l'image est dans un conteneur, utilisez position: relative sur ce conteneur */
  display: block;
  margin: 0 auto;
  /* Pour centrer horizontalement l'image */
}

.panel-12 img {
  height: 55vh;
  margin: 0;
  position: relative;
  /* Assurez-vous que le conteneur parent est en position relative */
  bottom: 0;
}

.panel-12 h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centre le texte horizontalement et verticalement par rapport à son conteneur */
  z-index: 2;
  color: bisque;
  text-align: center;
  margin-bottom: 10px;
  font-size: 5vh;
}

.panel-13 img {
  height: 45vh;
}

.panel-13 h1 {
  position: absolute;
  /* Utilisez position absolute pour positionner l'élément */
  top: 0;
  /* Alignez l'élément en haut du conteneur */
  left: 50%;
  /* Centrez l'élément horizontalement */
  transform: translateX(-50%);
  /* Ajustez le centrage horizontal */
  margin: 0;
  margin-top: 100px;
  /* Ajustez l'espace si nécessaire */
  font-size: 5vh;
  /* Taille de la police */
  text-align: center;
  /* Centrer le texte */
  z-index: 2;
  /* Assurez-vous que le texte soit au-dessus de l'image */
}

.panel-14 img {
  height: 45vh
}

.panel-14 h1 {
  font-size: 5vh;
  text-align: center;
  font-size: 5vh;
}





.panel-15 img {
  width: 100%;
  height: auto;
  /* Assurez que l'image prend toute la largeur du conteneur et garde son ratio */
  display: block;
  /* Assurez que l'image se comporte comme un bloc */
}

.panel-15 h1 {
  position: absolute;
  /* Position absolue pour placer le texte au-dessus de l'image */
  top: 47%;
  /* Centre verticalement le texte par rapport à l'image */
  left: 50%;
  /* Centre horizontalement le texte */
  transform: translate(-50%, -50%);
  /* Ajuste le positionnement pour un centrage parfait */
  z-index: 1;
  /* Assurez que le texte soit au-dessus de l'image */
  font-size: 10vh;
  /* Taille de la police */
  color: bisque;
  /* Couleur du texte pour le rendre visible */
  text-align: center;
  /* Centre le texte */
}

.panel-15 p {
  position: absolute;
  top: calc(47% + 10vh);
  /* Ajoute la hauteur du h1 */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 4vh;
  color: bisque;
  text-align: center;
}



.hidden {
  opacity: 0;
  pointer-events: none;
}

.appearing-element.move {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
  transition: opacity 1s ease, transform 1s ease;
}





































@keyframes rotateAndScale {
  from {
    transform: rotate(0deg) scale(0);
  }

  to {
    transform: rotate(720deg) scale(1);
  }
}

* {
  cursor: none;
}

body {
  background-color: grey;
  cursor: url("../images/Target.png"), auto;
  background-image: url(../images/gorgulov_première_image.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid rgb(0, 0, 0);
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: red;
  opacity: 1;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  z-index: 10000;
}

.cursor img {
  width: 50px;
}

.hover {
  background-color: red;
  opacity: 1;
}

.cursorinnerhover {
  width: 50px;
  height: 50px;
  opacity: 1;
  background-color: red;
}































/* Responsive Styles */
@media (max-width: 768px) {

  /* Styles pour les titres h1 et les paragraphes p globaux */
  h1,
  p {
    font-size: 4vh;
  }

  /* Styles pour le panel-2 */
  .panel-2 {
    font-size: 4vh;
  }

  .panel-2 h1 {
    font-size: 4vh;
  }

  .panel-2 img {
    height: 30vh;
    transform: translate(-10%, -10%) rotate(15deg);
  }

  /* Styles pour le panel-3 */
  .panel-3 {
    font-size: 4vh;
  }

  .panel-3 h1 {
    font-size: 4vh;
  }

  .panel-3 img {
    height: 30vh;
    top: 30%;
    left: 50%;
    transform: translate(10%, 10%) rotate(15deg);
  }

  /* Styles pour le panel-4 */
  .panel-4 {
    font-size: 4vh;
  }

  .panel-4 h1 {
    font-size: 4vh;
  }

  .panel-4 img {
    height: 50vh;
  }

  /* Styles pour le panel-5 */
  .panel-5 {
    font-size: 4vh;
  }

  .panel-5 h1 {
    font-size: 4vh;
  }

  .panel-5 img {
    height: 50vh;
  }

  /* Styles pour le panel-6 */
  .panel-6 {
    font-size: 4vh;
  }

  .panel-6 h1 {
    font-size: 4vh;
  }

  .panel-6 img {
    height: 50vh;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: all 1s ease;
  }

  /* Styles pour le panel-7 */
  .panel-7 {
    font-size: 4vh;
  }

  .panel-7 h1 {
    font-size: 4vh;
  }

  .panel-7 img {
    height: 50vh;
    display: block;
    right: 0;
    margin: 0;
    margin-bottom: 10px;
    position: absolute;
  }
}

.panel-8 img {
    height: 50vh;
    display: block;
    right: 0;
    margin: 0;
    margin-bottom: 10px;
    position: absolute;
    bottom: 0;
}


.panel-9 img {
    height: 50vh
}

.panel-9 h1 {
  font-size: 4vh;
}

.panel-10 img {
  height: 54vh;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: all 1s ease;
  }

.panel-10 h1 {
  position: absolute;
  bottom: 0;
  font-size: 4vh;
  text-align: center;
  z-index: 1;
  align-items: center;
}

.panel-11 img {
  font-size: 4vh;
}

.panel-11 h1 {
  font-size: 4vh;
}

.panel-12 img {
  font-size: 4vh;
}

.panel-12 h1 {
  font-size: 4vh;
}

.panel-13 img {
  font-size: 4vh;
}

.panel-13 h1 {
  font-size: 4vh;
}

.panel-14 img {
  font-size: 4vh;
}

.panel-14 h1 {
  font-size: 4vh;
}