/* ===== GLOBAL ===== */
body{
  margin:0;
  font-family:"Segoe UI", system-ui, sans-serif;
  background:linear-gradient(135deg,#f8faf9,#edf7f1);
  color:#1f2933;
  line-height:1.7;
}

/* ===== HEADINGS (Deep Green Gradient) ===== */
h1,h2,h3{
  background:linear-gradient(90deg,#065f46,#047857);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}
h3 a {
  -webkit-text-fill-color: initial; /* or a specific color */
  color: #2563eb; /* fallback */
}

h1 {
  font-size: clamp(18px, 4vw, 36px); /* min 18px, preferred 4% of viewport, max 36px */
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px; /* space between image and text */
}

h1 img {
  width: 50px; /* adjust if needed */
  height: auto;
}

h2 {
  font-size: clamp(16px, 3vw, 28px); /* min 16px, preferred 3% of viewport, max 28px */
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 16px;
}

h3 {
  font-size: clamp(14px, 2.5vw, 22px); /* min 14px, preferred 2.5% of viewport, max 22px */
  line-height: 1.3;
  margin-top: 20px;
  margin-bottom: 12px;
}

p {
  font-size: clamp(14px, 2.5vw, 18px); /* min 14px, preferred 2.5% of viewport, max 18px */
  line-height: 1.6;                   /* good readability */
  margin-bottom: 16px;                 /* spacing between paragraphs */
}

/* Links inside paragraphs */
p a {
  color: #2563eb;
  text-decoration: none;
}

p a:hover {
  text-decoration: underline;
}


/* ===== LINKS (Background Fill Animation) ===== */
a{
  color:#3d468e;
  text-decoration:none;
  position:relative;
  font-weight:500;
  padding:2px 4px;
  border-radius:7px;
  z-index:1;
}

/* animated background layer */
a::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(16,185,129,0.15);
  backdrop-filter:blur(4px);
  border-radius:6px;
  z-index:-1;

  transform:scaleX(0);
  transform-origin:left;
  transition:.25s;
}

/* hover effect */
a:hover::before{
  transform:scaleX(1);
}
/* ACCENT BAR */
a::after{
  content:"";
  position:absolute;
  left:8px;
  bottom:2px;
  height:1px;
  width:0%;
  background:linear-gradient(90deg,#10b981,#059669);
  border-radius:3px;
  transition:.15s ease;
}

a:hover::after{
  width:97%;
}
/* SOFT GLOW PULSE */
a:hover{
  box-shadow:0 0 8px rgba(134, 134, 129, 0.61);
}


/* Image */
.front img {
  width: 60px;
  margin-bottom: 10px;
}

.back a {
  margin-top: 10px;
  color: #95bdce;
  text-decoration: none;
}
.back p {
  color: #ffffff;
  text-decoration: none;
}
.back b {
  color: #ffffff;
  font-weight:700;
}

.center-img{
  display:block;
  margin:20px auto;
  max-width:100%;
}

.exp {
  font-size: 0.85em;
  color: #888;
  margin-left: 6px;
  font-weight: normal;
}