@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Alex Brush",cursive;
  background:#0a0713;
  color:#f5f0ff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at 50% 50%,black,transparent 75%);
}
.bg-glow{
  position:fixed;
  width:600px;
  height:600px;
  border-radius:50%;
  filter:blur(110px);
  opacity:.35;
  pointer-events:none;
}
.glow-one{background:#e8e8f0;top:-220px;left:-180px}
.glow-two{background:#ffffff;bottom:-260px;right:-200px}
.center{
  text-align:center;
  position:relative;
  z-index:1;
}
.center p{
  font-size:clamp(40px,8vw,90px);
  font-weight:400;
  letter-spacing:1px;
  background:linear-gradient(100deg,#f5f5f7,#ffffff,#e2e2ea);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 40px rgba(255,255,255,.5);
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.divider{
  width:70px;
  height:2px;
  margin:30px auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
}
.socials{
  display:flex;
  justify-content:center;
  gap:28px;
}
.socials a{
  color:#f5f5f7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  transition:transform .25s ease, color .25s ease, filter .25s ease;
}
.socials svg{
  display:block;
  width:100%;
  height:100%;
}
.socials a:hover{
  transform:scale(1.35);
  color:#ffffff;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.7));
}