/* ============================= */
/*        GLOBAL THEME           */
/* ============================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#000;
  color:white;
  overflow-x:hidden;
}

/* ===== RAIN BACKGROUND ===== */

.rain{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-2;
}

.rain span{
  position:absolute;
  width:2px;
  height:120px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.9),transparent);
  animation:fall linear infinite;
  opacity:0.6;
}

@keyframes fall{
  0%{transform:translateY(-200px);}
  100%{transform:translateY(120vh);}
}

/* ===== GLOWING GROUND ===== */

.ground{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:40%;
  background:
    radial-gradient(circle at 20% 70%, rgba(255,255,255,0.2), transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,0.15), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.2), transparent 40%);
  filter:blur(30px);
  z-index:-1;
}

/* ===== GLASS NAV ===== */

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 25px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
}

.logo{
  font-size:1.4rem;
  font-weight:600;
  color:white;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== BUTTONS ===== */

.btn{
  padding:8px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:white;
  font-size:0.85rem;
  cursor:pointer;
  transition:0.2s;
}

.btn:hover{
  background:rgba(255,255,255,0.15);
}

/* ===== CARDS ===== */

.card{
  background:rgba(255,255,255,0.05);
  padding:30px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(6px);
  transition:0.2s;
}

.card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,0.08);
}