body {
	display: flex;
  flex-direction:column;
  gap: 1rem;
	justify-content: center;
	align-items: center;
	background: linear-gradient(45deg, grey 0%, lightgray 100%);
  height:100vh;
}

.button{
  border: 1px solid black;
  border-radius: 25px;
  font-size: 20px;
  width: 100px;
  height: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.slots{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  width:80%;
  height:615px;
  outline: red solid 1px;
  gap:5px;
  overflow: hidden;
}

.reel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:1600px;
  width:200px;
  outline : green solid 1px;
  margin-top: 3px;
  
}

.slot{
    display:block;
    outline: blue solid 1px;
    width:100%;
    height:200px;
    margin: 3px 0px;
    overflow:hidden;
    transition : height .10s linear;
}

.text-result{
    z-index: 1000;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 62px;

}

.text-roll{
  display: block;
  z-index: 1000;
  position: absolute;
  top: 0%;
  left: 20%;
  transform: translate(-50%, -50%);
  font-size: 62px;

}


.winning-cancan{
  animation: scale-cancan 2s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-quentin{
  animation: scale-quentin 1.75s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-fred{
  animation: scale-fred 1.5s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-baba{
  animation: scale-baba 1.25s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-manon{
  animation: scale-manon 1s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-brechel{
  animation: scale-brechel .75s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-popo{
  animation: scale-popo .5s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-doyou{
  animation: scale-doyou .25s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}

.winning-brutas{
  animation: scale-brutas .5s infinite ease-in-out;
  transform-origin: 75px 75px;
  z-index: 100;
}


/* Keyframes pour l'animation */
@keyframes scale-cancan {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.1) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}

@keyframes scale-quentin {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.1) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}

@keyframes scale-fred {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.1) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}

@keyframes scale-baba{
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.1) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}
@keyframes scale-manon {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.1) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}
@keyframes scale-brechel {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.1) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}
@keyframes scale-popo {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.15) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}
@keyframes scale-doyou {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.2) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}
@keyframes scale-brutas {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.2) rotate(-15deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}