/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
/* === About Page Sections === */
.section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.section h2 {
  font-size: 1.2rem;
  color: #1a237e; /* Accent color matching header/nav */
  margin-bottom: 10px;
  border-bottom: 2px solid #1a73e8; /* subtle underline for headings */
  padding-bottom: 5px;
}

.section p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #333;
}

.section ul {
  margin-left: 20px;
  margin-bottom: 10px;
}

.section ul li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 12px;
}

.section ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #1a73e8; /* bullet accent color */
  font-weight: bold;
}

/* Footer styling */
.footer {
  text-align: center;
  font-size: 0.8rem;
  color: #555;
  margin-top: 30px;
}

.footer a {
  color: #1a73e8;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Header logo spacing (if you want to slightly tweak it) */
.header .logo {
  width: 80px;
  height: 80px;
  background: #e6e6e6; /* placeholder for your canvas logo */
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-bottom: 10px;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .section {
    padding: 15px;
  }
  .section h2 {
    font-size: 1.1rem;
  }
}