body{
    margin: 0;
    padding: 0;
    background: #0e2136;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.box{
    position: relative;
    width: 200px;
    aspect-ratio: 1/1;
    border-radius: 10px;

    padding: 2px; 

    background: conic-gradient(
        from var(--deg),
        #00c3ff,
        #4d0199,
        #6300c6,
        #009dcd
    );
    animation: spin 2s linear infinite;
}

.box::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--deg),
        #00c3ff,
        #4d0199,
        #6300c6,
        #009dcd
    );
    filter: blur(15px);
    z-index: -1;
    animation: spin 2s linear infinite;
}

.box-inner{
    width: 100%;
    height: 100%;
    background: #142d4a; 
    border-radius: 8px;  
}

@keyframes spin {
    to {
        --deg: 360deg;
    }
}