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

@keyframes sizepulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes anglerotate {
    to {
        --angle: 360deg;
    }
}

.nav-link[href$="students/register"] {
    position: relative;
    font-weight: bold;
    --angle: 0deg;
    background: linear-gradient(var(--angle), #743ad5, #d53a9d, #ff9633, #B2FF59, #00C853, #0d8f8a);
    -webkit-background-clip: text;
    animation: 6s anglerotate linear infinite, 1s sizepulse ease-in-out infinite;
}

.nav-link[href$="students/register"]::after {
    content: " ";
    position: absolute;
    top: -0.8em;
    left: -0.2em;
    right: -0.2em;
    bottom: -0.8em;
    --angle: 0deg;
    padding: 8px !important;
    border: 1px solid;
    border-image-slice: 1;
    border-image: linear-gradient(var(--angle), #743ad5, #d53a9d, #ff9633, #B2FF59, #00C853, #0d8f8a) 1;
    -webkit-mask-image: radial-gradient(transparent 0 1px, #000 6.5px);
    mask-image: radial-gradient(transparent 0 1px, #000 6.5px);
    border-width: 5px;
    border-radius: 8px;
    animation: 6s anglerotate linear infinite;
}

@media (max-width: 991.98px) {
    .navbar-expand .nav-link[href$="students/register"]::after {
        top: 0;
        bottom: 0;
    }

    .navbar-collapse .nav-link[href$="students/register"] {
        margin: 8px 20px;
        text-align: center;
    }

    .navbar-collapse .nav-link[href$="students/register"]::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}