@import url(./main.css);

main {
  height: 100vh;
}

#home {
  margin: auto;
  width: 100%;

  hero-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    font-size: var(--step-5);
    line-height: 90%;
    gap: var(--space-m-l);

    hero-blurb {
      display: flex;
      flex-direction: column;
      span:nth-last-of-type(-n + 2) {
        color: var(--accent-color);
        font-weight: bold;
      }
    }
    
    #hero-img {
      display: block;
      max-width: 100%;
      min-width: 8rem;
    }

    #hero-img img {
      max-width: inherit; 
      height: auto;
    }
  
    orbit-glow {
      --orbit-glow-color: white;
      --orbit-size: 160px;

      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--orbit-size);
      height: var(--orbit-size);
      margin: var(--space-m-l);
      animation: spin 0.5s linear infinite, pulse 3s linear infinite;
      border-radius: 50%;
      box-shadow: 
      inset 0 0 50px hsl(237, 81%, 45%),
      inset 20px 0 60px var(--accent-color),
      inset -20px 0 60px red,
      inset 20px 0 300px rgb(34, 54, 206),
      inset -20px 0 300px rgb(0, 102, 255),
      0 0 20px 20px rgb(233, 236, 255),
      0 0 50px 20px rgb(14, 45, 222);
      z-index: -1;

      core {
        width: 1px;
        height: 1px;
        box-shadow: 0 0 25px 20px rgb(91, 103, 213);
        background-color: (91, 103, 213);
      }

      core::after {
        content: "";
      }
    }    
  }
}

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

@keyframes pulse {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }

}

circle {
  --length: 40vw;
  display: flex;
  justify-items: center;
  align-items: center;
  width: var(--length);
  height: var(--length);
  background-color: red;
  background: linear-gradient(var(--accent-color),var(--background-secondary));
  clip-path: circle();
  animation: spin linear 2s infinite;
  position: absolute; 
  left: clamp(-60%, calc(var(--length) * -0.5), 80%); 
  top: calc(50% - var(--length)/2);
  z-index: -1;

  div {
    background-color: var(--background-secondary);
    width: calc(0.98 * var(--length));
    height: 35vw;
    clip-path: circle();
  }
}

#right-circle {
  --length: 40vw;
  left: auto;
  right: calc(var(--length) * -0.5); 
  animation: spin linear 2s infinite reverse;
  background: linear-gradient(var(--primary-color),var(--background-secondary));

}