*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --main-color: #20222c;
    --second-color: #4a60ff;
}
html,body{
    overflow-x: hidden;
}
body{
    background-color: var(--main-color);
    font-family: sans-serif;
}
.glow{
    height: 30vh;
    width: 40vw;
    background-color: #FF33CA;
    filter: blur(150px);
    border-radius: 150px;
    z-index: -1;
    position: absolute;
    opacity:0.90;
    top: 20px;
  }

  .headline{
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
  }
   h1{
    font-size: 4rem;
    background: -o-radial-gradient(
        circle,
        #090979 0%,
        #0654aa 51%,
        #0d0860 0%,
        #00ff71 100%,
      );
      background: radial-gradient(
        circle,
        #00ff71 0%,
        #0d0860 100%,
        #090979 21%,
        #0654aa 51%
      );
       -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; 
      color: var(--bg-primary);
      width: 100%;
      padding: 0px 10px;
      color: var(--bg-primary);
  }
  .marquee-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
    overflow: hidden;
  }
  
  .marquee {
    white-space: nowrap;
    
  }

  
  .marquee__inner {
    display: flex;
    
  }
  
  .marquee__content {
    font-size: 4rem;
    background: -o-radial-gradient(
      circle,
      #c7c7c7 0%,
      #ffffff 9%,
      #ffffff 0%,
      #000000 10%,
    );
    background: radial-gradient(
      circle,
      #000000 0%,
      #5e5e5e 10%,
      #ffffff 101%,
      #000000 100%
    );
     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
    border-bottom: 1px solid white;
  }