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

body {
  font-family: "Garamond", serif;
  background-color: #f4e9d8; 
      color: #3e3e3e; 
      text-align: center;
      padding: 20px;
  }
  
body {
    opacity: 1;
    transition: opacity 0.5s;
}

body.fade-in {
    opacity: 1;
}

body.fade-out {
    opacity: 0;
}

  #wrapper {
      max-width: 800px;
      margin: auto;
      padding: 20px;
      background-image: url('assets/images/parchment_bg.jpg'); 
      background-size: cover;
      border: 1px solid #8c7b6b; 
  }
  
  header h1 {
      color: #5d3a00; 
      margin-bottom: 20px;
  }
  
  nav ul {
      list-style-type: none;
      padding: 10px;
  }
  
  nav ul li {
      display: inline;
      margin-right: 20px;
  }
  
  nav ul li a {
      text-decoration: none;
      color: #5d3a00; 
      transition: color 0.3s ease-in-out;
  }
  
  nav ul li a:hover {
      color: #d3a04d; 
  }
  
  main {
      background: rgba(255, 255, 255, 0.8); 
      margin: 20px 0;
      padding: 20px;
      border-radius: 8px;
  }
  
  button {
      background-color: #8c7b6b; 
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      font-family: 'Garamond', serif;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease-in-out;
  }
  
  button:hover {
      background-color: #5d3a00; 
}

footer {
  margin-top: 20px;
  color: #5d3a00;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}