/* =========================
   FRUTIGER AERO THEME
========================= */

:root {
  --bg1: #bfe9ff;
  --bg2: #e8fff7;
  --bg3: #c8ffd9;

  --ink: #0b1b2a;
  --muted: rgba(11, 27, 42, 0.7);

  --glass: rgba(255, 255, 255, 0.35);
  --glass-strong: rgba(255, 255, 255, 0.55);
  --stroke: rgba(255, 255, 255, 0.65);

  --glow1: rgba(0, 255, 255, 0.25);
  --glow2: rgba(0, 255, 140, 0.18);

  --radius: 22px;
  --shadow: 0 18px 45px rgba(0, 40, 80, 0.18);
  --shadow2: 0 10px 28px rgba(0, 40, 80, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;

  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,0.95), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 85% 25%, rgba(0,255,255,0.18), rgba(0,255,255,0) 40%),
    radial-gradient(circle at 70% 85%, rgba(0,255,140,0.18), rgba(0,255,140,0) 45%),
    linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  overflow-x: hidden;
}

/* Floating bubble effect */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.55) 0 20px, rgba(255,255,255,0) 22px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.40) 0 34px, rgba(255,255,255,0) 36px),
    radial-gradient(circle at 65% 70%, rgba(255,255,255,0.45) 0 26px, rgba(255,255,255,0) 28px),
    radial-gradient(circle at 30% 75%, rgba(255,255,255,0.35) 0 42px, rgba(255,255,255,0) 44px);
  opacity: 0.9;
}

body::after {
  opacity: 0.55;
  filter: blur(1.2px);
}

/* Layout container */
.container {
  width: min(1100px, 92vw);
  margin: 28px auto 60px;
}

/* Glass effect */
.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Header */
.header {
  padding: 22px 22px 16px;
}

.site-title {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
}

.nav {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.7);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow2);
  transition: 160ms ease;
}

.nav a:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.62);
  box-shadow: 0 18px 40px rgba(0, 40, 80, 0.18), 0 0 0 6px var(--glow1);
}

/* Post grid */
.grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Card style */
.card {
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%);
  pointer-events: none;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0 0 12px;
  color: var(--muted);
}

.card a {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.7);
  padding: 10px 14px;
  border-radius: 999px;
  transition: 160ms ease;
}

.card:hover {
  box-shadow: var(--shadow), 0 0 0 7px var(--glow2);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
/* Top Floating Palm */
.top-palm{
  display:flex;
  justify-content:center;
  margin-top:20px;
  perspective:800px;
}

.palm-emoji{
  font-size:44px;
  display:inline-block;
  animation: spinPalm 6s ease-in-out infinite;
  transform-origin:50% 50%;
}

@keyframes spinPalm {
  0%   { transform: rotate(0deg) rotateY(0deg); }
  25%  { transform: rotate(3deg) rotateY(18deg); }
  50%  { transform: rotate(0deg) rotateY(0deg); }
  75%  { transform: rotate(-3deg) rotateY(-18deg); }
  100% { transform: rotate(0deg) rotateY(0deg); }
}

  
}