* {
  box-sizing: border-box;
}
body {
  display: grid;
  font-family: "Lato", sans-serif;
  background:#000;
  grid-template-columns: 1fr;
  gap: 0.4em;
}
#starLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.star{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.9);
  opacity:0.7;
  filter: drop-shadow(0 0 6px rgba(140,220,255,0.35));
  transform: translate3d(0,0,0);
  will-change: transform;
}
header, footer{
 width:min(94vw, 900px);
  padding: 5px 12px;
  border-radius: 22px;
  border:0 solid rgba(255,255,255,0.06);
  background: radial-gradient(120% 180% at 50% 0%, rgba(255,0,160,0.12), transparent 60%),
              linear-gradient(180deg, rgba(10,10,14,0.25), rgba(50,50,60,0.15));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  text-align: center;
  color: #f5ff00;
}
nav{
  width:min(94vw, 900px);
  border-radius: 22px;
  border:0px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(10,10,14,0.55), rgba(40,40,50,0.28));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 18px rgba(255,0,160,0.10);
  overflow: hidden;
  overflow-x: auto;
}
nav ul {
  width: 100%;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  
}
nav ul li{
  flex:1;
  padding: 4px;
  
  background: #fff;
}
main{
  width:min(94vw, 900px);
  border-radius: 22px;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(10,10,14,0.55), rgba(40,40,50,0.28));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 18px rgba(255,0,160,0.10);
}