:root{
    --GGspeed: 45s;
    }
    
    body {
    margin:0;
    padding:0;
    }
    #GGbackground-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(50deg, rgb(89, 143, 162), rgb(168, 189, 200));
    overflow: hidden;
    opacity: 0.8;
    }
    #GGup {
    position:absolute;
    height:45vw;
    width:45vw;
    border-radius:50%;
    background-image: linear-gradient(80deg, rgba(207,233,247, 0.8), rgb(81, 183, 219));
    filter:blur(100vw);
    animation: up var(--GGspeed) infinite;
    }
    #GGdown {
    position:absolute;
    right:0;
    height: 30vw;
    width: 30vw;
    border-radius: 50%;
    background-image: linear-gradient(-80deg, rgba(131, 58, 180, 0.4), rgba(253, 29, 30, 0.3));
    filter: blur(5vw);
    animation: down var(--GGspeed) infinite;
    }
    #GGleft {
    position:absolute;
    top:0;
    height: 20vw;
    width: 20vw;
    border-radius: 50%;
    background-image: linear-gradient(30deg, rgba(61, 68, 69, 0.3), rgb(20, 95, 91, 0.6));
    filter: blur(5vw);
    animation: left var(--GGspeed) infinite;
    }
    #GGright {
    position:absolute;
    bottom:0;
    height: 25vw;
    width: 25vw;
    border-radius: 50%;
    background-image: linear-gradient(80deg, rgba(187, 197, 198, 0.7), rgb(14, 132, 216));
    filter: blur(5vw);
    animation: right var(--GGspeed) infinite;
    }
    #GGorbit {
    position:absolute;
    top:35vh;
    left:35vw;
    transform: translate(-50%, -50%);
    height: 15vh;
    width: 15vw;
    border-radius: 50%;
    background-image: linear-gradient(120deg, rgba(112, 130, 135, 0.7), rgba(105, 140, 131, 0.5));
    filter: blur(15vw);
    animation: orbit var(--GGspeed) infinite;
    }
    #GGdiagA {
    position:absolute;
    bottom:0vh;
    transform: translate(-50%, -50%);
    height: 25vw;
    width: 25vw;
    border-radius: 50%;
    filter: blur(15vw);
    background-image: linear-gradient(80deg, rgba(253, 29, 30, 0.5), rgba(252, 176, 69, 0.4));
    animation: diagA var(--GGspeed) infinite;
    }
    #GGdiagB {
    position:absolute;
    top:-10vh;
    right:0vh;
    height: 25vw;
    width: 25vw;
    border-radius: 50%;
    filter: blur(30vw);
    background-image: linear-gradient(0deg, rgba(48, 115, 35, 0.4), rgba(120, 99, 66, 0.5));
    animation: diagB var(--GGspeed) infinite;
    }
    @keyframes up {
    0%, 100% {
        bottom: -6vh;
    }
    70% {
        bottom: 90vh;
    }
    }
    @keyframes down {
    0%, 100% {
        top: -6vh;
    }
    70% {
        top: 90vh;
    }
    }
    @keyframes left {
    0%, 100% {
        right: -6vw;
    }
    70% {
        right: 90vw;
    }
    }
    @keyframes right {
    0%, 100% {
        left: -6vw;
    }
    70% {
        left: 90vw;
    }
    }
    @keyframes orbit {
    from {
        transform: rotate(0deg) translateX(15vw) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(15vw) rotate(-360deg);
    }
    }
    @keyframes diagA {
    0%, 100% {
        left: -30vw;
        bottom: -30vw;
    }
    70% {
        left: 30vw;
        bottom: -10vw;
    }
    }
    @keyframes diagB {
    0%, 100% {
        top: 20vw;
        right: 50vw;
    }
    70% {
        top: -10vw;
        right: 5vw;
    }
    }