/* 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." */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fonts and Base */
body {
  font-family: Georgia, serif;
  background-color: #f5f5f5;
  color: #111;
  line-height: 1.6;
  padding: 1rem;
}

p {
  margin-bottom: 1rem;
}

/* Header */
header {
  text-align: center;
  padding: 2rem 1rem;
  border-bottom: 2px solid #ccc;
  background-color: #fff;
}

header h1 {
  font-size: 2.5rem;
  color: #000;
}

.subtitle {
  font-style: italic;
  color: #666;
  margin-top: 0.5rem;
}

/* Navigation */
nav {
  background-color: #111;
  margin-top: 1rem;
  padding: 0.5rem 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 1rem;
}

.nav-links a {
  color: #f5f5f5;
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  transition: background 0.3s;
}

.nav-links a:hover {
  background-color: #b30000;
}

/* Main content */
main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #ccc;
}

.intro h2 {
  color: #b30000;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.intro p {
  font-size: 1rem;
  color: #333;
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid #ccc;
}

/* About Me page styles */
#about-me {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  background-color: #fafafa;
  border-left: 4px solid #b30000;
  box-sizing: border-box;
  font-family: Georgia, serif;
  color: #222;
  line-height: 1.5;
}

#about-me h2 {
  color: #b30000;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 0.75rem;
}

#about-me h3 {
  color: #444;
  font-weight: 600;
  text-transform: lowercase;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

#about-me p {
  margin: 0.5rem 0 1rem;
}

#about-me ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: #222;
}

#about-me ul.contact-info {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

#about-me ul.contact-info li {
  margin-bottom: 0.3rem;
}

#about-me a {
  color: #b30000;
  text-decoration: none;
  border-bottom: 1px dotted #b30000;
  font-weight: bold;
}

#about-me a:hover {
  text-decoration: underline;
  border-bottom-style: solid;
}

#about-me dl {
  margin: 1rem 0 2rem;
}

#about-me dt {
  font-weight: 700;
  margin-top: 1rem;
  color: #111;
}

#about-me dd {
  margin-left: 1rem;
  margin-bottom: 0.8rem;
  color: #555;
  font-style: normal;
}

/* Resources page styles */
.resource-category {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  background-color: #fafafa;
  border-left: 4px solid #b30000;
  box-sizing: border-box;
  color: #222;
  font-family: Georgia, serif;
  line-height: 1.4;
}

.resource-category h2 {
  color: #b30000;
  margin-bottom: 0.5rem;
}

.resource-category h3 {
  color: #444;
  margin-bottom: 0.5rem;
}

.resource-category ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.resource-category li {
  margin-bottom: 0.5rem;
}

.resource-category a {
  font-weight: bold;
  color: #111;
  text-decoration: none;
  border-bottom: 1px dotted #b30000;
}

.resource-category a:hover {
  color: #b30000;
  border-bottom-style: solid;
}

resource-category p p {
  margin-bottom: 1rem;
}

.image-section {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  background-color: #fafafa;
  border-left: 4px solid #b30000;
  box-sizing: border-box;
  font-family: Georgia, serif;
  color: #222;
}

.image-section h3 {
  color: #444;
  margin-bottom: 0.5rem;
}

.image-section img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.image-section p {
  font-size: 1rem;
  color: #555;
}