/* variables */
body {
  background: #e0e5ec;
  min-height: 100vh;
}

.wrapper {
  margin: 60px auto;
}

.neumorphism {
  background-color: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.card-w .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 30px;
  border-radius: 30px;
  position: relative;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-w .card .card__text {
  text-align: center;
}

/* inset */
.card.inset {
  box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
}
.card.inset i {
  text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00;
}

.card.active {
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
  background: linear-gradient(318.32deg, rgba(163, 177, 198, 0.1) 0%, rgba(163, 177, 198, 0.1) 55%, rgba(163, 177, 198, 0.25) 100%);
}