* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-family: "PxGrotesk";
  background-color: rgb(75, 95, 255);
  color: rgb(0, 248, 83);
  cursor: url("../images/2021_ecal_web_img52.png"), pointer;
}

img {
  width: 100%;
  height: 100%;
}

.container-title {
  position: relative;
  width: 100%;
}

.image-perlmann {
  position: relative;
}

.image-perlmann img {
  display:block;
}

.caroussel {
  position: absolute;
  top: 0px;
  opacity: 0;
}

.item1 {
  animation-name: image-animation1;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

@keyframes image-animation1 {
  
  0% {
    opacity: 0;
  }
  
  50%  {
    opacity: 1;
  }

  100%  {
    opacity: 0;
  }
}

.item2 {
  animation-name: image-animation2;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-delay: 3s
}

@keyframes image-animation2 {
  
  0% {
    opacity: 0;
  }
  
  50%  {
    opacity: 1;
  }

  100%  {
    opacity: 0;
  }
}

.item3 {
  animation-name: image-animation3;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-delay: 6s; 
}

@keyframes image-animation3 {
  
  0% {
    opacity: 0;
  }
  
  50%  {
    opacity: 1;
  }

  100%  {
    opacity: 0;
  }
}

.button-intro {
  position: relative;
  width: 100%;
}

.title-perlman{
  padding: 10px;
  z-index: 1;
  position: absolute;
  top: 0px;
  width: 100%;
}

.cls-1-title{
  z-index: 3;
  padding: 10px;
  width: 100%;
  stroke-dasharray: 1000;
  animation-name: animation-stroke-title;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  transition: fill .5s ease-in-out, transform .5s ease-in;
}
  @keyframes animation-stroke-title {
  0%  {
    opacity: 0;
    fill: rgb(0, 248, 83);
    stroke-dashoffset: 1000;
  }
  
  50% {
    opacity: 3;
    fill: rgb(75, 95, 255);
    stroke-dashoffset: 0;
  }
  
  100% {
    opacity: 0;
    fill: rgb(0, 248, 83);
    stroke-dashoffset: 1000;
  }
}

.cls-1-title:hover{
  fill: rgb(75, 95, 255);
  cursor: url("../images/2021_ecal_web_img51.png"), pointer;
  transition: fill .5s ease-in-out, transform .5s ease-in;
}

.bloc-text-intro{
  position: relative;
  width: 100%;
}

.text-intro{
  position: relative;
  padding: 10px;
  color: rgb(0, 248, 83);
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: rgb(0, 248, 83);
}

/* fin accueil */

.container-space{
  position: relative;
  width: 100%;
  height: 80%;
}

.container-spanning{
  position: relative;
  width: 100%;
}

.button-chapitre-one {
  z-index: 6;
  color: rgb(0, 248, 83);
  font-size: 45px;
  padding: 5px;
  cursor: url("../images/2021_ecal_web_img51.png"), pointer;
  text-align: center;
  transition: background-color .5s ease-in-out, transform .5s ease-in;
}

.button-chapitre-one:hover {
  z-index: 6;
  color: rgb(75, 95, 255);
  background-color: rgb(0, 248, 83);
  text-align: center;
  transition: background-color .5s ease-in-out, transform .5s ease-in;
}


.bloc-text-one{
  position: relative;
  width: 100%;
}

.text-one {
  position: relative;
  padding: 10px;
  color: rgb(0, 248, 83);
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: rgb(0, 248, 83);
}


.cls-1-title-anim{
  stroke-dasharray: 500;
  animation-name: animation-title-anim;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  transition: fill .5s ease-in-out, transform .5s ease-in;
}
  @keyframes animation-title-anim {
  0%  {
    opacity: 0;
    fill: rgb(75, 95, 255);
    stroke-dashoffset: 500;
  }
  
  50% {
    opacity: 3;
    fill: rgb(0, 248, 83);
    stroke-dashoffset: 0;
  }
  
  100% {
    opacity: 0;
    fill: rgb(75, 95, 255);
    stroke-dashoffset: 500;
  }
}

.fleche {
  padding-top: 10px;
  position: relative;
  width: 100%;
}


.cls-1-fleche {
  stroke-dasharray: 2800;
  opacity: 10;
  animation-name: animation-stroke;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  /* animation-delay: 20s; */
}

@keyframes animation-stroke {
  0%  {
    opacity: 0;
    fill: none;
    stroke-dashoffset: 2800;
  }

  50% {
    opacity: 3;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 2800;
  }
}

/* fin partie spanning */

.button-chapitre-two {
  z-index: 6;
  color: rgb(0, 248, 83);
  font-size: 45px;
  padding: 5px;
  cursor: url("../images/2021_ecal_web_img51.png"), pointer;
  text-align: center;
  transition: background-color .5s ease-in-out, transform .5s ease-in;
}

.button-chapitre-two:hover {
  z-index: 6;
  color: rgb(75, 95, 255);
  background-color: rgb(0, 248, 83);
  text-align: center;
  transition: background-color .5s ease-in-out, transform .5s ease-in;
}

.bloc-text-two{
  position: relative;
  width: 100%;
}

.text-two {
  position: relative;
  padding: 10px;
  color: rgb(0, 248, 83);
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: rgb(0, 248, 83);
}

.texte-concert {
  column-count: 3;
  padding: 10px;
  color: rgb(0, 248, 83);
}

.container-two {
  position: relative;
  width: 100%;
  overflow: hidden;
}

@keyframes image-musique-animation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.container-tree {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 10%;
} 

.cell {
  font-size: 15px;
  text-align: center;
  width: calc(100% / 10);
  height: calc(100% / 4);
  animation-name: border-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}

@keyframes border-animation {
  0% {
    border-left: 1px rgb(75, 95, 255) solid;
    border-right: 1px rgb(75, 95, 255) solid;
  }

  50% {
    border-left: 1px rgb(0, 248, 83) solid;
    border-right: 1px rgb(0, 248, 83) solid;
  }

  100% {
    border-left: 1px rgb(75, 95, 255) solid;
    border-right: 1px rgb(75, 95, 255) solid;
  }
}

.entry {
  width: 100%;
  height: 100%;
  border-radius: 0%;
  padding: 4px;
  color: rgb(75, 95, 255);
  transition: background-color 5s ease-in;
}


.cell:hover .entry {
  color:rgb(75, 95, 255);
  background-color: rgb(0, 248, 83);
  cursor: url("../images/2021_ecal_web_img52.png"), pointer;
  transition: background-color .5s ease-out;
}

.image-musique {
  clip-path: polygon(70% 0%, 70% 70%, 100% 70%, 50% 100%, 0% 70%, 30% 70%, 30% 0%);
  position: absolute;
  width: 100%;
  animation-name: image-musique-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

/* fin partie musique */

.button-chapitre-tree {
  position: relative;
  z-index: 6;
  color: rgb(0, 248, 83);
  font-size: 45px;
  padding: 5px;
  cursor: url("../images/2021_ecal_web_img51.png"), pointer;
  text-align: center;
  transition: background-color .5s ease-in-out, transform .5s ease-in;
}

.button-chapitre-tree:hover {
  position: relative;
  z-index: 6;
  color: rgb(75, 95, 255);
  background-color: rgb(0, 248, 83);
  text-align: center;
  transition: background-color .5s ease-in-out, transform .5s ease-in;
}

.bloc-text-tree{
  position: relative;
  width: 100%;
}

.text-tree {
  position: relative;
  padding: 10px;
  color: rgb(0, 248, 83);
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: rgb(0, 248, 83);
}

.container-turtle {
  position: relative;
  width: 100%;
  height: 100%;
}

.turtle {
  position: relative;
  width: 100%;
}

.cls-1-turtle {
  stroke-dasharray: 1800;
  opacity: 10;
  animation-name: animation-stroke-turtle;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes animation-stroke-turtle {
0%  {
  opacity: 0;
  fill: none;
  stroke-dashoffset: 1800;
}

50% {
  opacity: 3;
  stroke-dashoffset: 0;
}

100% {
  opacity: 0;
  stroke-dashoffset: 1800;
}
}

.cls-2-turtle {
  stroke-dasharray: 1800;
  opacity: 10;
  animation-name: animation-stroke-turtle;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  }
  
  @keyframes animation-stroke-turtle {
  0%  {
    fill-opacity: 0;
    opacity: 0;
    stroke-dashoffset: 1800;
  }
  
  50% {
    fill-opacity: 2;
    opacity: 3;
    stroke-dashoffset: 0;
  }
  
  100% {
    fill-opacity: 0;
    opacity: 0;
    stroke-dashoffset: 1800;
  }
  }

.texte-turtle {
  padding-top: 10px;
  column-count: 2;
  padding: 10px;
  color: rgb(0, 248, 83);
}

::-webkit-scrollbar{
  width: 5px;
  height: 10px;

}

::-webkit-scrollbar-thumb{
  border-radius: 0%;
  background-color: rgb(0, 248, 83);
  height: 0.1px;
  position:absolute;
  z-index: 200;

}

::-webkit-scrollbar-track{
  z-index: 800;
}

@media screen and (max-width: 588px) {
  .text-intro {
  padding: 8px;
  position: relative;
  width: 100%;
  column-count: 2;
  font-size: 19px;
}
}

@media screen and (max-width: 588px) {
  .text-one {
  padding: 8px;
  position: relative;
  column-count: 2;
  width: 100%;
  font-size: 19px;
}
}

@media screen and (max-width: 588px) {
  .text-two  {
  padding: 8px;
  position: relative;
  column-count: 2;
  width: 100%;
  font-size: 19px;
}
}

@media screen and (max-width: 588px) {
  .text-tree  {
  padding: 8px;
  position: relative;
  width: 100%;
  column-count: 2;
  font-size: 19px;
}
}

@font-face {
  font-family: PxGrotesk;
  src: url(../fonts/PxGrotesk-Regular.otf);
}