/*  
 Student name: Caeden Geoffrey
 Date: Sep 20 2025
 File Name: styles.css
*/

/*color variables for easier updates*/
:root {
  --background-color: #f6eee4;
  --nav-bg-color: #2a1f14;
  --nav-text-color: #f6eee4;
  --link-color: #4d3319;
  --footer-bg-color: #2a1f14;
  --footer-text-color: #f6eee4;
  --footer-link-color: #f3e6d8;
  --hover-bg-color: #45321f;
  --hover-link-color: #33210a;
}
/* CSS Reset */
body, header, nav, main, footer, img, h1 {
  margin: 0;
  padding: 0;
  border: 0;
}
/* Body and images */
body {
  background-color: var(--background-color);
  font-family: Verdana, Arial, sans-serif;
  line-height: 1.6;
  color: #000; /* default text color */
}
img {
  max-width: 100%;
  display: block;
}
/* Navigation styles */
nav {
  background-color: var(--nav-bg-color);
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
nav li {
  display: inline-block;
  font-size: 1.5em;
  font-family: Geneva, Arial, sans-serif;
  font-weight: bold;
}
nav li a {
  display: block;
  color: var(--nav-text-color);
  padding: 0.5em 2em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
nav li a:hover,
nav li a:focus {
  background-color: var(--hover-bg-color);
  color: var(--nav-text-color);
  outline: none;
}
/* Main content */
main {
  padding: 2%;
}
main p {
  font-size: 1.25em;
  margin-bottom: 1em;
}
main h3 {
  padding: 2% 0;
}
main ul {
  list-style-type: square;
  padding-left: 1.5em;
  margin-bottom: 1em;
}
/* links */
.link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: bold;
  font-style: italic;
  transition: color 0.3s ease;
}
.link:hover,
.link:focus {
  color: var(--hover-link-color);
  outline: none;
}
/*action class*/
.action {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
}
/*contact section*/
#contact {
  text-align: center;
  margin-top: 2em;
}
/*footer style*/
footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  text-align: center;
  font-size: 0.85em;
  padding: 1% 0;
}
footer a {
  color: var(--footer-link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
footer a:hover,
footer a:focus {
  color: #d4c7b0;
  outline: none;
}