:root{
  --bg:#0b1412;
  --card:#14201d;
  --card2:#101a17;
  --text:#e8fff7;
  --muted:#9bc7b8;

  --accent:#7bdcb5;
  --accent2:#3ddc97;

  --radius:18px;
  --shadow:0 12px 40px rgba(0,0,0,0.35);
}

body{
margin:0;
font-family:system-ui;
background:radial-gradient(circle at top, #10231f, var(--bg));
color:var(--text);
overflow-x:hidden;
}

/* 🦫 NAVBAR */
.nav{
display:flex;
gap:12px;
padding:14px 18px;
position:sticky;
top:0;
background:rgba(20,32,29,0.7);
backdrop-filter: blur(14px);
border-bottom:1px solid rgba(125,220,181,0.15);
}

.nav a{
color:var(--text);
text-decoration:none;
opacity:0.8;
transition:0.2s;
}

.nav a:hover{
opacity:1;
transform:translateY(-1px);
color:var(--accent);
}

/* 📦 CONTAINER */
.container{
max-width:850px;
margin:50px auto;
padding:0 16px;
}

/* 🧱 CARD (CAPYBARA FEEL) */
.card{
background:linear-gradient(145deg,var(--card),var(--card2));
padding:16px;
margin:14px 0;
border-radius:var(--radius);
box-shadow:var(--shadow);
transition:0.25s ease;
position:relative;
overflow:hidden;
animation:floatIn 0.5s ease;
border:1px solid rgba(125,220,181,0.1);
}

.card:hover{
transform:translateY(-6px) scale(1.01);
border-color:rgba(125,220,181,0.3);
}

/* 🦫 CAPYBARA ACCENT GLOW */
.card::before{
content:"";
position:absolute;
left:-50%;
top:-50%;
width:200%;
height:200%;
background:radial-gradient(circle, rgba(125,220,181,0.15), transparent 60%);
opacity:0;
transition:0.3s;
}

.card:hover::before{
opacity:1;
}

/* 🔘 BUTTONS */
button{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#062019;
border:none;
padding:10px 14px;
border-radius:14px;
cursor:pointer;
font-weight:700;
transition:0.2s;
box-shadow:0 10px 25px rgba(61,220,151,0.25);
}

button:hover{
transform:scale(1.05);
}

/* 💬 COMMENTS */
.comment{
padding:10px 12px;
margin:8px 0;
border-left:3px solid var(--accent);
background:rgba(125,220,181,0.08);
border-radius:12px;
}

/* 🧾 INPUTS */
input,textarea{
width:100%;
padding:10px;
margin:6px 0;
border-radius:12px;
border:1px solid rgba(125,220,181,0.2);
background:rgba(0,0,0,0.2);
color:var(--text);
}

input:focus,textarea:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(125,220,181,0.2);
}

/* ✨ ANIMATIONS */
@keyframes floatIn{
from{
opacity:0;
transform:translateY(14px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* 🦫 SMALL CAPY FEEL TEXT */
h1::after{
content:" 🦫";
}