@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 100 1000;
}
@layer properties {
  @property --rotation {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
:root {
  --debug: 1;
  --bg-background: hsl(0deg 0% 8%);
  --polygon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --size: 300px;
  --rotation: 0;
  --offset: 10px;
}

/**,*/
/**:before,*/
/**:after {*/
/*    box-sizing: border-box;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*    outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%);*/
/*}*/

.card_outer {
  padding: 4px;
  /*background: conic-gradient(from calc(var(--rotation)*1deg), #fff,#fff,#01ffff);*/
  /*background: conic-gradient(from calc(var(--rotation)*1deg), black, black, hsl(calc(var(--rotation)*1deg), 100%, 100%));*/
  display: grid;
  place-items: center;
  animation: rotate 2s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
}
.card_inner {
  width: calc(100% - var(--offset));
  aspect-ratio: 1/0.9;
  background: var(--bg-background);
}

@keyframes rotate {
  from {
    --rotation: 90;
  }
  to {
    --rotation: 450;
  }
}