:root{
  --bg: #0b1020;
  --card: #121830;
  --text: #e6e9f5;
  --muted: #a9b0c7;
  --brand: #0ea5e9;
  --accent: #22d3ee;
  --shadow: 0 10px 30px rgba(2,8,23,.35);
  --radius: 18px;
}

body{
  margin:0; font-family: "Comic Sans MS", cursive; background: var(--bg); color: var(--text); display:flex; flex-direction:column; align-items:center;
}

.container{width:90%; max-width:900px; padding:24px;}

.header{display:flex; justify-content:space-between; align-items:center; width:100%; padding:16px; background: rgba(11,16,32,.85);}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; color:var(--brand);}
.brand img{width:34px; height:34px; border-radius:8px;}
.nav a{color: var(--text); text-decoration:none; padding:10px 14px; margin-left:4px; border-radius:8px; cursor:pointer;}
.nav a.active{background: var(--accent); color:#00131a;}

.section{display:block; margin-top:20px; background: var(--card); padding:20px; border-radius: var(--radius); box-shadow: var(--shadow);}
.btn{padding:10px 16px; border-radius:12px; margin-right:8px; border:none; cursor:pointer;}
.btn.primary{background: linear-gradient(135deg, var(--brand), var(--accent)); color:#00131a;}
.embed{position:relative; width:100%; padding-top:56%; border-radius:12px; overflow:hidden; margin-top:12px;}
.embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.social-icons{display:flex; justify-content:center; gap:16px; margin-top:12px;}
.social-icons a{display:flex; align-items:center; justify-content:center; width:40px; height:40px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:50%; border:1px solid rgba(255,255,255,.08); color:var(--text);}
.social-icons img{width:20px; height:20px;}
.footer{margin-top:20px; text-align:center; color: var(--muted);}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0b3d91, #0a2540); /* darker blue gradient */
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #1d4ed8, #0f172a); /* slightly brighter on hover */
}

.social-icons img {
  width: 24px;
  height: 24px;
  filter: invert(1); /* makes white-on-blue effect */
}