:root{
  --bg:#1f1f1f;
  --panel: rgba(255,255,255,0.04);
  --c1: #6990CF;
  --c2: #CF6990;
  --c3: #90CF69;
  --c4: #4F9F3F;
  --grid-size: 48px;
  --grid-dot-size: 6px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#fff;
  overflow:hidden;
}

/* Grid-paper overlay (small squares at intersection points) */
body::before{
  content: "";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  /* 2x2 tile (96x96) with squares at (0,0) and (48,48) -> removes every second square (checker) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><rect x='0' y='0' width='6' height='6' fill='%23ffffff' opacity='0.04'/><rect x='48' y='48' width='6' height='6' fill='%23ffffff' opacity='0.04'/></svg>");
  background-repeat: repeat;
  background-size: calc(var(--grid-size) * 2) calc(var(--grid-size) * 2);
}

/* Foreground content */
.site-header{ position:fixed; top:4vh; left:50%; transform:translateX(-50%); text-align:center; z-index:3; cursor:default;}
.title{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:800;
  font-size:6rem;
  line-height:1;
  letter-spacing: -1px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform .3s;
  
}
.title:hover{
  transform: scale(1.05);
  cursor:wait;
}
.hero{
  position:fixed;
  top: 40%;
  left:50%;
  transform:translate(-50%,-10%);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.subtitle-box{
  background: var(--panel);
  padding:18px 34px;
  /*border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  color:#fff;
  font-size:1.6rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);*/ /* maybe ill change this later idk */
  backdrop-filter: blur(6px);
}
.bnuuy{
  transform: scale(1.5);
}
@media (max-width:900px){
  .title{ font-size:4rem }
}
@media (max-width:480px){
  .title{ font-size:2.6rem }
  .subtitle-box{ font-size:1.1rem; padding:12px 18px }
}

footer {
  align: bottom;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-family: console, monospace;
}