/* === druca.css — poboljšani prikaz primjera flex grow/shrink === */

:root{
  --accent:#0ea5a4;
  --muted:#475569;
  --card:#ffffff;
  --radius:10px;
  --gap:14px;
}

body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg,#f7fcfc,#eef9fb);
  color:#0f172a;
  padding:24px;
}

h1{ font-size:20px; margin-bottom:14px; }

.flex-container{
  display:flex;
  gap:var(--gap);
  align-items:stretch;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,252,255,0.7));
  padding:14px;
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(2,6,23,0.06);
  border:1px solid rgba(6,182,212,0.06);
}

.flex-item{
  min-width:80px;
  padding:18px;
  border-radius:8px;
  text-align:center;
  font-weight:600;
  color:#04263a;
  background: linear-gradient(180deg,#ffffff, #f1fbfb);
  border:1px solid rgba(6,182,212,0.06);
  box-shadow: 0 6px 16px rgba(6,182,212,0.04);
}

/* Visual distinction for the item that grows/shrinks */
.flex-item.grow{
  background: linear-gradient(90deg, rgba(6,182,212,0.14), rgba(14,165,164,0.06));
  border: 1px solid rgba(6,182,212,0.12);
  color:#063241;
}

.flex-item.shrink{
  background: linear-gradient(90deg, rgba(255,237,213,0.7), rgba(255,251,235,0.6));
  border:1px solid rgba(245,158,11,0.08);
  color:#7a4f00;
}

/* Helpful explanatory notes */
p{ color:var(--muted); margin-top:12px; font-size:14px; line-height:1.45; }

/* Make demo responsive on small screens */
@media (max-width:560px){
  .flex-container{ flex-direction:column; }
  .flex-item{ width:100%; }
}