/* POP-UP Modal*/
.popup-section {
  display: block;
  position: fixed;
  background-color: green;
  z-index: 1;
  right: 0rem;
  top: 83%;
  margin-top: 1rem;
  margin-right: 2rem;
  transform: scale(1.2);
  opacity: 0;
  transition: all 300ms ease-in-out;
}

/* Show POP-UP Modal */
.show-popup {
  opacity: 1;
  transform: scale(1);
  animation: bounceIn 0.6s linear;
}

/* POP-UP Modal transitions */
@keyframes bounceIn {
 0%,
 20%,
 40%,
 60%,
 80%,
 to {
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 0% {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
 }
 20% {
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
 }
 40% {
  -webkit-transform: scale3d(0.9, 0.9, 0.9);
  transform: scale3d(0.9, 0.9, 0.9);
 }
 60% {
  opacity: 1;
  -webkit-transform: scale3d(1.01, 1.01, 1.01);
  transform: scale3d(1.01, 1.01, 1.01);
 }
 80% {
  -webkit-transform: scale3d(0.97, 0.97, 0.97);
  transform: scale3d(0.97, 0.97, 0.97);
 }
 to {
  opacity: 1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
 }
}

.popup-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 10rem;
  width: fit-content;
  height: 5rem;
  padding: 12px;
  background: rgba(21, 0, 0, 0.689);
  border-radius: 10px 0px 0px 10px;
}

.popup-text .popup-name {
  font-size: 1rem;
  font-weight: 400;
  font-family: "Segoe UI", "san-serif";
  width: max-content;
  margin-bottom: 0.5rem;
}

.popup-text .popup-bold {
 font-family: "Segoe UI", "san-serif";
  font-weight: 400;
  font-size: 1.25rem;
}

@media screen and (min-width: 768px) {
  .popup-text .popup-name{
    font-size: 1.25rem;
  }

  .popup-text .popup-bold {
    font-size: 1.45rem;
  }
}