:root{
  --accent: #9bc400;           /* Grassy Green */
  --heading: #8076a3;          /* Purple Mountains Majesty */
  --text: #ffffff;             /* pure white for max contrast */
  --bg-gradient-start: #4b348a; /* Factory Stone Purple */
  --bg-gradient-end: #54207e;   /* Purple Mountains Majesty */
  --max-width: 720px;
  --gap: 1rem;
  --radius: 10px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  height:100%;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  line-height:1.5;
  color: var(--text);
  background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

body{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1rem;
}

/* container */
.container{
  width:100%;
  max-width:var(--max-width);
  padding:1rem;
}

/* articles */
.content-section{
  margin:0 auto var(--gap);
  padding:1rem;
  border-radius:var(--radius);
  background: transparent;
  box-shadow: none;
  border: none;
}

/* headings & text */
h1,h2,h4{
  color: var(--heading);
  margin-bottom: .5rem;
  font-weight: 600;
  text-shadow: 0 3px 6px rgba(0,0,0,0.6);
}

h3{
  color: var(--heading);
  text-align: center;       /* center h3 */
  margin-bottom: .5rem;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

p{
  margin-bottom: .75rem;
  color: var(--text);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* stronger shadow for pop */
}

/* images/buttons */
img{ 
  max-width:100%; 
  height:auto; 
  display:block; 
  margin:.75rem 0; 
  border-radius:6px; 
}

a{ 
  color: var(--accent); 
  text-decoration:none; 
  font-weight: 600;
}
a:hover{ text-decoration:underline; }

button,.btn{ 
  background: var(--accent); 
  color:#fff; 
  border:none; 
  padding:.6rem .9rem; 
  border-radius:8px; 
  cursor:pointer; 
  font-weight:600; 
}

/* desktop padding */
@media(min-width:800px){
  body{ padding:2rem; }

}