/* 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: #4a3b2e;

  
   /* Ensure the body fills at least the entire height of the screen */
/*   min-height: 100dvh; */
  
  /* Stack children vertically */
  display: flex;
  flex-direction: column;

  /* Use your image file path here */

  /* Scale the image to fit the container perfectly without stretching */
  background-size: cover; 
  /* Center the image horizontally and vertically */
  background-position: center center; 
  /* Prevent the image from repeating like a tile grid */
  background-repeat: no-repeat; 
  /* Make sure the container fills the full screen height */
  min-height: 100vh;  
  /* OPTIONAL: Keeps the background fixed in place when scrolling */
  background-attachment: fixed;  
  /* Remove default browser padding/margin */
  margin: 0;
  padding: 0;

}
header {
display: flex;
}

main {
  /* Instruct the main content area to grow and take up all available space */
  flex-grow: 1; 
  padding: 50px;
}


footer {
  display: flex;
  justify-content: space-evenly;
  align-items: center; /* Vertically centers the items */
  padding: 20px 40px;
}

a {
   color: #edb4d1;
   font-weight: 500; 
   transition: color 0.2s ease, text-decoration 0.2s ease
}

a:hover {
    color: #bf749b;          
    text-decoration: underline; 
}


a:active {
    color: #e5c3d4;         
}