* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.notificatin-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgreen;
  width: 120px;
  border: lightblue 2px solid;
  border-radius: 10px;
  position: absolute;
  transform: translateY(-60px) translateX(0px);
}

.popup {
  animation: popup 5s ease-in-out;
}

.notification p {
  font-family: 'Vazir';
  margin: 5px 7px;
}

@keyframes popup {
  0% {
    transform: translateY(-60px) translateX(0px);
  }

  25% {
    transform: translateY(30px) translateX(0);
  }

  50% {
    transform: translateY(30px) translateX(0);
  }

  75% {
    transform: translateY(30px) translateX(0);
  }

  100% {
    transform: translateY(-60px) translateX(0);
  }
}