:root {
  --primary: #3F8FA4;
  --primary-dark: #2E6B7D;
  --ink: #20343A;
  --muted: #6B7D82;
  --bg: #F4F8F9;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background-image: url("https://img.magnific.com/vecteurs-premium/fond-motif-multicolore-style-geometrique-islamique_117445-1166.jpg?semt=ais_hybrid&w=740&q=80");
  line-height: 1.6;
}

header {
  background: var(--primary);
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

header h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

header .baseline {
  margin: 0;
  opacity: .9;
}



p {
  background-color: rgb(106,4,15);
  border: 8px solid rgb(220, 47, 2);
  color: rgb(255 , 186 ,8);
  padding: 20px;
}



main {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(32, 52, 58, .08);
}

section h2 {
  margin-top: 0;
  color: var(--primary-dark);
}

.team {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.team li {
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 20px;
}