/*html {
    height: 100%;
    background: #223;
    display: grid;
    place-items: center;
}*/
.box {
  --border-size: 3px;
  --border-angle: 0turn;
  width: 60vmin;
  height: 50vmin;
  background-image: conic-gradient(from var(--border-angle), #000, #000 50%, #000), conic-gradient(from var(--border-angle), transparent 20%, #000, #000);
  background-size: calc(100% - var(--border-size) * 2) calc(100% - var(--border-size) * 2), cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: bg-spin 3s linear infinite;
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/*# sourceMappingURL=AnimatedBorderGradient.Compiled.css.map */