body{margin:0;background:black;color:#0ff;font-family:Segoe UI,Arial;overflow:hidden}
#space{
 position:fixed;inset:0;
 background:
  radial-gradient(circle at 20% 30%, #00f 0, transparent 40%),
  radial-gradient(circle at 80% 70%, #f80 0, transparent 40%),
  url("https://cdn.esahubble.org/archives/images/screen/potw1441a.jpghttps://cdn.esahubble.org/archives/images/thumb700x/heic2502a.jpg") center/cover no-repeat;
 animation:drift 80s linear infinite;
}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.2)}}

#city{position:relative;z-index:2;text-align:center;padding-top:10vh}
#logo{
 font-size:60px;font-weight:800;
 color:gold;text-shadow:0 0 34px gold;
 animation:pulse 7s infinite;
}
@keyframes pulse{0%{opacity:.7}31%{opacity:1}100%{opacity:.7}}

.grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:30px;
 max-width:900px;
 margin:80px auto;
}
.grid a{
 padding:30px;
 border-radius:16px;
 background:rgba(0,255,255,.1);
 backdrop-filter:blur(10px);
 color:#0ff;
 text-decoration:none;
 box-shadow:0 0 20px #0ff;
 transition:.3s;
}
.grid a:hover{transform:scale(1.08);box-shadow:0 0 50px #f80}