/*interactive crap*/
@keyframes rotate {
  from {
    rotate: 0deg;
  }
  
  50% {
    scale: 1 1.5;
  }
  
  to {
    rotate: 360deg;
  }
}

#blob {
  background-color: white;
  height: 34vmax;
  aspect-ratio: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary-1));
  animation: rotate 5s infinite linear;
  opacity: 0.8;
  z-index: -3;
}

#blur {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -2;
  backdrop-filter: blur(12vmax) brightness(120%);
}


/*grainy background crap*/

/* @keyframes grainShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1px,1px); }
  50% { transform: translate(1px,-1px); }
  75% { transform: translate(-1px,-1px); }
  100% { transform: translate(1px,1px); }
}

svg[style] {
  animation: grainShift 1s steps(1) infinite;
}  */

/*<svg 
  style="position: fixed; top:0; left:0; width:100%; z-index:-1; pointer-events:none; opacity:0.08; " 
  viewBox="0 0 400 400"
  xmlns="http://www.w3.org/2000/svg">

  <filter id="noiseFilter">
      <feTurbulence 
          type="fractalNoise" 
          baseFrequency="2" 
          numOctaves="1" 
          stitchTiles="stitch" />
  </filter>

  <rect width="100%" height="100%" filter="url(#noiseFilter)" />
  </svg>  
*/


#topgrain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.08;
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 60vh,
    transparent 100vh
  );
}

/* fallback */
/* #topgrain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;

  background-image:
    linear-gradient(
      to top,
      rgba(27, 29, 30, 1) 0%,
      rgba(27, 29, 30, 0.43) 40vh,
      rgba(27, 29, 30, 0.01) 60vh,
      rgba(27, 29, 30, 0) 100vh
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");

  background-size:
    100% 100%,
    200px 200px;

  background-repeat: no-repeat, repeat;
} */