@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .glow-container {
    width: 100vw;
    height: 100vh;
    z-index: 4;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1440px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .glow {
   
    --size: 300px;
    --speed: 50s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(hsl(222, 84, 60, 100%), hsl(164, 79, 71));
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  
  @media (min-width: 720px) {
    .glow {
      --size: 600px;
    }
  }
  
  
  /* This is just to transition when you change the viewport size. */
  * {
    transition: all 0.5s ease-out;
  }