.scoreUp {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  animation: appearAndTranslateUp 1.5s linear;
  width: fit-content;
  span {
    font-size: 40px;
    color: white;
  }
  img {
    width: 40px;
    height: 40px;
  }
}

@keyframes appearAndTranslateUp {
  80% {
    bottom: 40px;
    opacity: 0;
  }
  100% {
    bottom: 40px;
    opacity: 0;
  }
}

.scoreDown {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  animation: appearAndTranslateDown 1.5s linear;
  width: fit-content;
  span {
    color: rgb(255, 0, 0);
    font-size: 40px;
  }
  img {
    width: 40px;
    height: 40px;
  }
}

@keyframes appearAndTranslateDown {
  10%,
  20%,
  30%,
  45% {
    transform: translateX(5px);
  }
  15%,
  25%,
  35%,
  45% {
    transform: translateX(-5px);
  }
  80% {
    bottom: 20px;
    opacity: 0;
  }
  100% {
    bottom: 20px;
    opacity: 0;
  }
}

.scoreContainer {
  justify-content: space-around;  height: 59%;
  align-items: center;
  .titleContainer{
     width: 53%;
  }
  .content{
      width: 38%;
      display: flex;
      flex-direction: column;
      align-items: center;
      *{
        width: 100%;
      }
      ul{
          width: 50%;

      }
  }
  h3 { 
    width: 26%;
    margin: 0;
    margin-block: 15px;
    text-align: center;
  }
  h3,
  ul {
    margin-top: 0;
    width: 21%;
    padding: 0;
    p {
      width: 100%;
    }
  }
}