/*
  main.css
  --> ce fichier contiendra la mise en page de votre affiche
*/


#affiche {
  /* vous pouvez éditer le bloc #affiche mais uniquement pour lui ajouter du padding ou changer sa mise en forme (changer sa couleur de fond, sa famille de caractères, etc.) de manière à ne pas casser la gestion du bloc dans la page */


}


/* l’élément créé par p5.js et dans lequel on dessine */
#text {
    position: absolute;
    display: flex;

    left: 37%;
    /* color: white; */
}
canvas {
  position: absolute;
  z-index: 0;
  top:0;
  left:0;

  mix-blend-mode: overlay;
  -webkit-filter: blur(10px);

}

/* #cercle1 {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    z-index: 5;
    display: flex;
    -webkit-filter: blur(2px);
    left: 40vh;
    top: 60vh;
    animation: moveyourbody 3s forwards infinite;
    mix-blend-mode: normal;
}

@keyframes moveyourbody {
    0% { top:calc(100% - 91vh);}
    25% { top:calc(100% - 0vh);}

} */

.decor {
  width: 100%;
  position: absolute;
  z-index: 0;


}

 .texte {
  width: 100%;
  position: absolute;
  z-index: 7;
  opacity: 0;
  transition: all, 2s;

}
#affiche:hover .texte{
    opacity: 1;
}

.logo {
  width: 100%;
  position: absolute;
  z-index: 3;

}

.glitch{
    width: 100%;
    position: absolute;
    z-index: 7;
    transition: all, 1s;
}

#Layer_1{
    width: 100%;
    position: absolute;
    z-index: 8;
    /* au survol de l'élément la souris devient un pointer*/
    cursor:pointer;

}
/* #Layer_1:hover{
    background-color: red;
} */

#Layer_1:hover .cls-1{
    fill:none;
}

#Layer_1:hover .cls-2{
    fill:none;
}

#Layer_1:hover .cls-3{
    fill:none;
}
#Layer_1:hover .cls-4{
    stroke-width: 0;
}
#Layer_1:hover .cls-5{
    fill:none;
}
#Layer_1:hover .cls-6{
    fill:none;
}
#Layer_1:hover .cls-7{
    fill:none;
}
#Layer_1:hover .cls-8{
    fill:none;
}








/*question, au survol d'un élément, faire bouger un autre*/



#affiche:hover .glitch{
    opacity: 0;
}