body {
  background-color: #090A0F;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
/** See https://caniuse.com/mdn-css_at-rules_property and https://caniuse.com/css-paint-api */
@supports (background: paint(houdini)) {
  @property --conicGradientAngle {
    initial-value: -65deg;
    inherits: false;
    syntax: '<angle>';
    }
  @property --colorGradient1 {
    initial-value: #090A0F;
    inherits: false;
    syntax: '<color>';
    }
  @property --colorGradient1PosX {
    initial-value: 50%;
    inherits: false;
    syntax: '<percentage>';
    }
}

button {
  background: none;
  text-decoration: inherit;
  font-size: 1rem;
  padding: 2rem 4rem;
  outline: transparent;
  cursor: pointer;
  small {
    font-size: .8rem;
  }
}

.animated-border {
  color: #FFF;
  font-size: 24px;
  --conicGradientAngle: -65deg;
  --colorGradient1: #090A0F;
  --colorGradient1PosX: 10%;
  border-style: solid;
  border-image-slice: 1;
  border-width: 15px;
  border-image-source: conic-gradient(from var(--conicGradientAngle) at var(--colorGradient1PosX) 50%, #F05223, 30deg, #F57C31, 90deg, var(--colorGradient1), 230deg, #F05223);
  transition: --conicGradientAngle 0.15s ease-in-out, --colorGradient1 0.6s ease-in-out, --colorGradient1PosX 0.15s ease-in-out;
  /** Fallback for the gradient animation */
  @supports not (background: paint(houdini)) {
    &:hover {
      --conicGradientAngle: 20deg;
      --colorGradient1: #F57C31;
      --colorGradient1PosX: 50%;
      border-image-source: conic-gradient(from var(--conicGradientAngle) at var(--colorGradient1PosX) 50%, #F05223, 95deg, var(--colorGradient1), 230deg, #F05223);
    }
  }
  @supports (background: paint(houdini)) {
    &:hover {
      --conicGradientAngle: -40deg;
      --colorGradient1: #F57C31;
      --colorGradient1PosX: 50%;
    }
  }  
}