body {

    -webkit-user-select: none;

    -moz-user-select: -moz-none;

    -ms-user-select: none;

    user-select: none;

}



.blur-box {

    position: fixed;

    top: 35%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -2;

    width: 600px;

    height: 400px;

    background-color: rgba(0, 0, 0, 0.63);

    backdrop-filter: blur(20px);

    border-radius: 10px;

}



.blur-box:before {

    content: '';

    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

    position: absolute;

    top: -2px;

    left: -2px;

    background-size: 400%;

    z-index: -1;

    filter: blur(5px);

    width: calc(100% + 4px);

    height: calc(100% + 4px);

    animation: glow 20s linear infinite;

    opacity: 0;

    transition: opacity .3s ease-in-out;

    border-radius: 10px;

}



.blur-box:before {

    opacity: 1;

}



.blur-box:after {

    z-index: -1;

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    background: #111;

    left: 0;

    top: 0;

    border-radius: 10px;

}



@keyframes glow {

    0% {

        background-position: 0 0;

    }



    50% {

        background-position: 400% 0;

    }



    100% {

        background-position: 0 0;

    }

}