:root {
    --bs-primary: #1b447c;
    --bs-secondary: #AF6465;
}



.box {
    display: grid;
    place-content: center;
    color: #fff;
    text-shadow: 0 1px 0 #000;

    --border-angle: 0turn;
    --main-bg: conic-gradient(
        from var(--border-angle),
        #fff,
        #fff,
        #fff,
        #fff
    );

    border: solid 5px transparent;
    border-radius: 2em;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--bs-primary), var(--bs-secondary) 99%, transparent);

    background:
        var(--main-bg) padding-box,
        var(--gradient-border) border-box,
        var(--main-bg) border-box;

    background-position: center center;

    animation: bg-spin 5s linear infinite;
    padding: 0px !important;
    overflow: hidden;
    }

    @keyframes bg-spin {
        to {
            --border-angle: 1turn;
        }
    }

    .box:hover {
        animation-play-state: paused;
    }

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