@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes glow {
  0%,
  100% {
    filter: brightness(100%) drop-shadow(0 0 -30px rgb(255, 29, 37));
  }

  50% {
    filter: brightness(110%) drop-shadow(0 10px 40px rgb(255, 29, 37));
  }
}

@keyframes rotateAndDisappear {
  100% {
    transform: rotate(3turn) scale(0);
  }
}

@keyframes scaleAnim {
  100% {
    transform: scale(6, 6);
  }
}

@keyframes moveAnim {
  from {
    transform: translateX(120%);
  }

  to {
    transform: translateX(-220%);
  }
}

@keyframes moveAnim2 {
  from {
    transform: translateX(120%);
  }

  to {
    transform: translateX(-220%);
  }
}

/* Classes */

.hidden {
  /* I tried to use visibility: hidden but my page broke so I stick with display none and try to work with visibility later */
  /* visibility: hidden; */
  display: none;
}

.fadeOut {
  opacity: 100%;
  animation: infinite fadeOut 5s;
}

.glow {
  animation: glow 1.5s infinite;
}

.stop {
  animation-play-state: paused;
}

.rotateAndDisappear {
  animation: rotateAndDisappear 2s;
}

.scale {
  animation: scaleAnim 1.2s;
}

/* to the baby foreground when she is awake */
.move {
  animation: infinite moveAnim 15s;
}

/* to the baby foreground when she is sleepy */
.move2 {
  animation: infinite moveAnim 30s;
}

.babyState1 {
  background-image: url(../Graphics/Baby_state/Sleepy_Baby_Baby_Awake.svg);
}

.babyState2 {
  background-image: url(../Graphics/Baby_state/Sleepy_Baby_Baby_almost_Sleeping.svg);
}

.babyState3 {
  background-image: url(../Graphics/Baby_state/Sleepy_Baby_Baby_sleeping.svg);
}

/* Positions */

.position1 {
  left: 0%;
  top: 2%;
}

.position2 {
  left: 20%;
  top: 20%;
}

.position3 {
  left: 10%;
  top: 40%;
}

.position4 {
  left: 40%;
  top: 3%;
}

.position5 {
  left: 70%;
  top: 50%;
}

.position6 {
  left: 50%;
  top: 50%;
}

.position7 {
  left: 75%;
  top: 50%;
}

.position8 {
  left: 10%;
  top: 45%;
}

.position9 {
  left: 82%;
  top: 2%;
}

.position10 {
  left: 58%;
  top: 30%;
}

.position11 {
  left: 10%;
  top: -60%;
}

.position12 {
  top: 5%;
  left: 3%;
}

.position13 {
  top: 10%;
  left: 25%;
}
.position14 {
  top: 4%;
  left: 48%;
}
.position15 {
  top: 4%;
  left: 70%;
}
.position16 {
  top: 36%;
  left: 3%;
}

.position17 {
  top: 36%;
  left: 25%;
}
.position18 {
  top: 29%;
  left: 48%;
}
.position19 {
  top: 31%;
  left: 70%;
}