.card {
  margin: 0 auto;
  height: 100%;
  padding: 2em;
  text-align: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.card .card-body .col {
  font-size: clamp(0.15rem, 5vw, 3rem);
}

/*
@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.card::after, .card::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: red;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 10px;
    box-sizing: initial;
    border-radius: 10px;

    filter: grayscale(1);

    background-image: conic-gradient(from var(--angle), #e81416,#ffa500,#faeb36,#79c314,#487de7,#4b369d,#70369d,#e81416);
    animation: 4s spin linear infinite;
}

.card:hover::after{
    filter: grayscale(0);
}

.card::before{
    filter:blur(1rem);
    opacity: 1;
}

@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}

*/