/* source: https://codepen.io/Juxtopposed/pen/zYmoRKo */
:root {
  /*--bg: #080B12;*/
  --text: #CFB3E6;
  --border-grd1: #6C6499;
  --border-grd2: #111222;
  --card-grd1: #1F193D;
  --card-grd2: #05060D;
  --card-border-radius: 5px;
  --radial-center: rgba(173,155,255,0.3);
  --radial-edge: rgba(11,12,22,0.3);
  --shadow: rgba(173,155,255,0.5);
  --card-width: 30%;
  --card-height: 70%;
}
.card {
  font-family: "Recoleta";
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  width: var(--card-width);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--card-grd1), var(--card-grd2));
  border-radius: var(--card-border-radius);
  transition: all ease 0.3s;
  filter: drop-shadow(0px 0px 0px rgb(173,155,255,0));
  z-index: 1;
}
@media only screen and (max-width: 1000px) {
  .card {
    width: 50%;
    height: 80%;
  }
}
@media only screen and (max-width: 700px) {
  .card {
    width: 80%;
    height: 90%;
  }
}
.border {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: var(--card-border-radius);
  border: 1px solid transparent;
  background: linear-gradient(135deg,var(--border-grd1),var(--border-grd2)) border-box;
  -webkit-mask:
     linear-gradient(#fff 0 0) padding-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, var(--radial-center), var(--radial-edge)), linear-gradient(135deg, var(--card-grd1), var(--card-grd2));
  z-index: -2;
  border-radius: var(--card-border-radius);
  opacity: 30%;
  transition: all ease 0.3s;
}
.shadow {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: var(--card-border-radius);
  z-index: 1;
  box-shadow: 0px 0px 0px 0px rgb(173,155,255,0);
  transition: all ease 0.3s;
}
/* Hover */
.card:hover > .backdrop {
  width: calc(100% + 1.25rem); /* 320px / 300px = 106.67% */
  height: calc(100% + 1.25rem);
  background: radial-gradient(circle at top, var(--radial-center), var(--radial-edge)), linear-gradient(135deg, var(--card-grd1), var(--card-grd2));
  z-index: -2;
  border-radius: var(--card-border-radius);
  opacity: 5%;
  transition: all ease 0.2s;
}
.card:hover {
  z-index: 3;
  transition: all ease 0.5s;
}
.card:hover > .filter {
  opacity: 22%;
  transition: all ease 0.3s;
  mix-blend-mode: hard-light;
}
.card:hover > .shadow {
  box-shadow: 0px 0.25rem 2rem 0.225rem rgb(173,155,255,0.1);
  z-index: 1;
  transition: all ease 0.3s;
}