.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-transform: uppercase;
  font-size: 5rem;
  color: blueviolet;
}

.button {
  position: absolute;
  top: -10px;
  left: 240px;
  transform: scale(2);
  background-color: chartreuse;
}

.button-2 {
  position: relative;
  background-color: yellow;
  margin: 10px;
}

.chat {
  width: 600px;
  height: 387px;
  /* border: 1px solid palevioletred; */
  background: center/contain url("media/chats.png");
}

.vomi {
  background: top no-repeat url("media/arcenciel_petit.png");
  height: 0px;
  width: 200px;
  transition: height 1s;
}

.leftcat {
  position: absolute;
  top: 185px;
  left: 93px;
}

.middlecat {
  position: absolute;
  top: 117px;
  right: 170px;
}

.rightcat {
  position: absolute;
  top: 166px;
  right: 50px;
}

.animation {
  position: relative;
  transform: rotate(0deg);
  transition: transform 2s;
}

.visible {
  height: 200px;
  transition: height 1s;
}

.tourne180 {
  transform: rotate(180deg);
  transition: transform 1s;
}