:root {
    --background-rgb: 15 15 15;
    
    --blue-rgb: 33 150 243;
    --primary-rgb: var(--blue-rgb);
    
    --blob-color-1: rgb(var(--blue-rgb));
    --blob-color-2: dodgerblue;
  }
  
*{
    margin : 0;
    padding : 0;
}
body{
  background-color: #101015;
  width:100%;
  height:100%;
  overflow: hidden;
}
.container{
  background-color: #101015;
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.boutonback{
    color:white;
    height: 30px;
    width: 60px;
    border : 1px solid #202020;
    display:grid;
    place-content: center;
    font-size : 40px;
    text-decoration : none;
    top:2%;
    left:2%;
    position:absolute;
    border-radius : 5px;
    transition:all 0.1s;
    z-index: 99;
    background-color:#080808;
  }
  .boutonback:hover{
    transform : scale(1.1);
  }
@font-face {
  font-family: 'Ailerons'; /* Nom de la police */
  src: url(../Ressources/Ailerons.woff) format('woff');
  font-weight: lighter;
  font-style: normal;
}
.image{
    background-image: url(../../images/stage/IMG_20221213_151100.jpg);
    height:80vh;
    aspect-ratio: 10 / 10;
    background-size: 150%;

    border-radius: 1rem;
    border: 3px solid rgb(var(--primary-rgb) / 80%);
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.anim1{
  animation:pan-image1 6s linear infinite;
}
.anim2{
  animation:pan-image2 6s linear infinite;
}
.anim3{
  animation:pan-image3 6s linear infinite;
}
.anim4{
  animation:pan-image4 6s linear infinite;
}
.anim5{
  animation:pan-image5 6s linear infinite;
}
.image:after,
.image:before {
  content: "";
  height: 5px;
  position: absolute;
  z-index: 4;
  left: 50%;
  translate: -50% 0%;
  background-color: white;
}

.image:before {
  width: 15%;
  top: 0rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.image:after {
  width: 25%;
  bottom: 0rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
@keyframes pan-image1 {  
    0% {
      background-position: 36% 42%;
      background-size: 200%;
    }
    
    100% {
      background-position: 30% 35%;
      background-size: 200%;
    }}
@keyframes pan-image2 { 
    0% { /* -- View 2 -- */
      background-position: 60% 10%;
      background-size: 150%;
    }
    
    100% {
      background-position: 28% 20%;
      background-size: 150%;
    }}
@keyframes pan-image3 { 
    
    0% { /* -- View 3 -- */
      background-position: 46% 42%;
      background-size: 180%;
    }
    
    100% {
      background-position: 84% 33%;
      background-size: 180%;
    }}
@keyframes pan-image4 { 
    
    0% { /* -- View 4 -- */
      background-position: 0% 0%;
      background-size: 150%;
    }
    
    100% {
      background-position: 15% 4%;
      background-size: 150%;
    }}
@keyframes pan-image5 { 
    
    0% { /* -- View 5 -- */
      background-position: 80% 10%;
      background-size: 200%;
    }
    
    100% {
      background-position: 72% 14%;
      background-size: 200%;
    }
  }
  .content{
    height:80vh;
    width:80vh;
    color: white;
  }
  .titre{
    font-family: 'Ailerons';
    font-size:4vh;
  }
  .texte{
    font-family :Verdana, Geneva, Tahoma, sans-serif;
    line-height: 150%;
    font-size:1.8vh;
  }