:root {
  --bg-color: #000000;
}

h1 {
  color: rgb(255, 255, 255);
  font-size: 100px;
  text-align: center;
}

body {
  margin: 0;
  background-color: var(--bg-color);
}
/*
html { scrollbar-width: none; } /* Firefox 
body { -ms-overflow-style: none; } /* IE and Edge 
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome 
body { -webkit-overflow-scrolling: touch; } /* Phone sorta
*/
.centered {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
}

.grid-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  perspective: 500px;
  z-index: 0;
}

.grid-floor {
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background-image: 
      linear-gradient(90deg, rgba(var(--grid-color)) var(--grid-thickness), transparent var(--grid-thickness)),
      linear-gradient(rgba(var(--grid-color)) var(--grid-thickness), transparent var(--grid-thickness));
    background-size: 150px 150px; /* Size of each grid square */
    transform-origin: center center;
    animation: move-grid var(--grid-speed) linear infinite;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(to bottom, black 0%, transparent 35%);
    /* linear-gradient(to top, black 0%, transparent 4%); */
  pointer-events: none;
  z-index: 3;
}

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask: radial-gradient(125% 75% at 50% 25%, transparent 25%, black 100%); 
  -webkit-mask: radial-gradient(125% 50% at 50% 25%, transparent 15%, black 100%);
  transform: scale(1.10);
  z-index: 2;
}

@keyframes move-grid {
  0% {
    transform: rotateX(var(--gridX)) translateY(0px) translateX(0px) translateZ(var(--gridZ));
  }
  100% {
    transform: rotateX(var(--gridX)) translateY(var(--grid-movement)) translateX(var(--grid-movement)) translateZ(var(--gridZ)); 
  }
}