            }

            50% {
                transform: translateX(80%) translateY(20%);
            }

            100% {
                transform: translateX(-80%) translateY(-20%);
            }
        }
/* backgroup */
        .gradient-bg {
            width: 100vw;
            height: 100vh;
            position: fixed;
            overflow: hidden;
            background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
            top: 0;
            left: 0;
            z-index: -1