.pub_background {
    height: calc(100vh - 102px);
    width: calc(100vw - 10px);
    /* border: 1px solid red; */
    position: absolute;
    z-index: -1;
    overflow: hidden;
}

.background_cube1 {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 200px;
    margin-top: 150px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateX(-30deg);
    animation: animate_cube1 10s linear infinite;
}

.cube1_top {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background: #fff;
    transform: rotateX(90deg) translateZ(50px);
}

.background_cube1 div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.background_cube1 div span {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    background: linear-gradient(#fff, #409eff);
    transform: rotateY(calc(90deg * var(--i))) translateZ(50px);
}

.cube1_top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: #409eff;
    transform: translatez(-160px);
    filter: blur(20px);
    box-shadow:
        0 0 120px rgba(64, 158, 255, 0.2),
        0 0 200px rgba(64, 158, 255, 0.4),
        0 0 300px rgba(64, 158, 255, 0.6),
        0 0 400px rgba(64, 158, 255, 0.8),
        0 0 500px rgba(64, 158, 255, 1);
}

.shell2 {
    display: inline-block;
    transform: translateY(-100px);
}

.background_cube2 {
    width: 150px;
    height: 150px;
    margin-left: 1000px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateX(-30deg);
    animation: animate_cube2 20s linear infinite;
}

.cube2_top {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 150px;
    background: #fff;
    transform: rotateX(90deg) translateZ(75px);
}

.background_cube2 div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.background_cube2 div span {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    background: linear-gradient(#fff, #e74032);
    transform: rotateY(calc(90deg * var(--i))) translateZ(75px);
}

.cube2_top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: #e74032;
    transform: translatez(-180px);
    filter: blur(20px);
    box-shadow:
        0 0 120px rgba(231, 64, 50, 0.2),
        0 0 200px rgba(231, 64, 50, 0.4),
        0 0 300px rgba(231, 64, 50, 0.6),
        0 0 400px rgba(231, 64, 50, 0.8),
        0 0 500px rgba(231, 64, 50, 1);
}

.background_cube3 {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-left: 1050px;
    margin-top: 150px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateX(-30deg);
    animation: animate_cube3 10s linear infinite;
}

.cube3_top {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #fff;
    transform: rotateX(90deg) translateZ(25px);
}

.background_cube3 div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.background_cube3 div span {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    background: linear-gradient(#fff, #fdf277);
    transform: rotateY(calc(90deg * var(--i))) translateZ(25px);
}

.cube3_top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: #fdf277;
    transform: translatez(-130px);
    filter: blur(20px);
    box-shadow:
        0 0 120px rgba(253, 242, 119, 0.2),
        0 0 200px rgba(253, 242, 119, 0.4),
        0 0 300px rgba(253, 242, 119, 0.6),
        0 0 400px rgba(253, 242, 119, 0.8),
        0 0 500px rgba(253, 242, 119, 1);
}

@keyframes animate_cube1 {
    0% {
        transform: rotateX(-30deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}

@keyframes animate_cube2 {
    0% {
        transform: rotateX(-30deg) rotateY(36deg);
    }

    100% {
        transform: rotateX(-30deg) rotateY(396deg);
    }
}

@keyframes animate_cube3 {
    0% {
        transform: rotateX(-30deg) rotateY(360deg);
    }

    100% {
        transform: rotateX(-30deg) rotateY(0deg);
    }
}