body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  color: #d44e10;
}

header {
  background-color: #ff7426; /* reversed background-text colours scheme with "the body/other elements"*/
  color: white;
  padding: 20px;
  text-align: center;
}

nav a {
    

    margin-right: 10px;
  display: inline-block;
  padding: 6px 14px; 
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #fff);/* fallback if no variable */
  transition: background 0.25s, color 0.25s;
}

nav a:hover,nav a:focus{
    background: #fff;/*#ff7426*/
   
    color: var(--accent,#642727);
}

.header-content{
    display: flex;/* more easily centered*/
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
}
.headerLogo{
    height: 130px;
    width: auto;
}

section {
  padding: 30px;
  background-color: white;
  margin: 10px;
  border-radius: 8px;
}


footer {
  text-align: center;
  padding: 20px;
  background-color: #ddd;
}


/* reusable palettes */
.theme-purple   { 
    --bg:#f3f0ff; 
    --accent:#6c63ff; 
    --text:#333; }
.theme-orange   { 
    --bg:#fff4e8; 
    --accent:#ff7426; 
    --text:#333; }
.theme-teal     { 
    --bg:#e8fffb; 
    --accent:#17a398; 
    --text:#333; }
.theme-yellow   { 
    --bg:#fffbe6; 
    --accent:#ffce3d; 
    --text:#333; }

/* generic styling that uses the variables */
.section       { 
    background-color: var(--bg); 
    color:var(--text); 
    padding:40px 20px; 
    margin:20px auto; 
    max-width:800px; 
    border-radius:12px; }
.section h2    { color:var(--accent); 
    margin-top:0; }
.section a,
.section button{ color:var(--accent); }

/* optional border to reinforce the accent */
.section.accent-border{ border-left:8px solid var(--accent); }