* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 100vh;
  width: 100vw;
  align-content: center;
  flex-wrap: wrap;
  background: #99b6f7;
  background: radial-gradient(
    circle,
    rgba(153, 182, 247, 1) 0%,
    rgba(92, 107, 247, 1) 100%
  );
}
.mainCard {
  background-color: white;
  width: 30vw;
  border-radius: 20px;
  outline: 10px solid #ffffff5b;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.first {
  height: 100%;
  animation: ease fromLeft 2s;
}
.second {
  height: 35vh;
}
.ad {
  width: 27vw;
  align-self: center;
  background-color: rebeccapurple;
}
.logo,
.menu {
  /* width: 30px; */
  height: 30px;
}
.CardContainer {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cardUpper {
  height: 15%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
span,
aside {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
h6 {
  color: gray;
}
p {
  padding: 15px;
  text-align: center;
}
button {
  background-color: #fff;
  border: none;
  width: 100%;
  margin-bottom: 40px;
}
.rightAnim {
  animation: ease fromRight 2s;
}
.topAnim {
  animation: ease fromTop 2s;
}
.bottomAnim {
  animation: ease fromBottom 2s;
}
@keyframes fromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}