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



/* HTML Elements */
body {
  /* Grid Display */
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav main main"
    "footer footer footer";
  grid-template-columns: 1fr 3fr; /* Sidebar: 1 part, Main: 3 parts */
  grid-template-rows: auto 1fr auto; /* Rows size automatically */
  gap: 25px; /* Space between areas */
  min-height: 100vh; /* Ensures the body fills the viewport */
  
  /* Color & Font */
  background-color: #f8f0d8;
  font-family: "Amatic SC", sans-serif;
  color: black;
  
  /* Spacing */
  margin: 20px;
}

@media (max-width: 768px) {
  body {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* Assign elements to named areas */
header { 
  grid-area: header; 
  background: #faf0d8;
  text-align: center;
  font-size: 2rem;
}

h1 { border: 1px solid black; }


nav    { 
  grid-area: nav;    
  background: #c9534a; 
  font-size: 1rem;
}

main   { 
  grid-area: main;   
  background: #a1a083; 
  font-size: 1rem;
}

footer { 
  grid-area: footer; 
  background: #7a5135; 
  font-size: 1rem;
}


/* Custom Classes */
.borders {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.header-content {
  display: flex;          /* Flexbox for easy alignment */
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px;
  
}

.header-img {
  border: 1px solid black;
}