.cardsty-container {
  cursor: pointer;
  height: 290px;
  perspective: 600;
  position: relative;
  width: 90%;
  align-items: center;
  margin: 0 0 0 10px;
}
.cardsty {
  height: 300px;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 300px;
  margin: 0 0 0 10px;
}
.cardsty:hover {
  transform: rotateY(180deg);
}
.cardsty .side {
  backface-visibility: hidden;
  border-radius: 80%;
  border: 2px solid rgb(226, 171, 54);
  height: 100%;
  color: rgb(22, 22, 22);
  background-color: blanchedalmond;
  position: absolute;
  overflow: hidden;
  width: 100%;
  margin: 0 0 0 10px;
}
.cardsty .back {
  background: #ffebcd;
  color: #050505;
  border-radius: 80%;
  transform: rotateY(180deg);
  margin: 0 0 0 10px;
}

.notification:hover{
  background-color: rgb(237, 233, 233);
  border-radius: 10px;
}