/* ================================
   Body background with magical gradient overlay
   ================================ */
body {
  /* Gradient overlay with purple-orange tint over the forest image */
  background: 
    linear-gradient(
      rgba(128, 0, 128, 0.4),   /* Top tint: semi-transparent purple */
      rgba(255, 165, 0, 0.3)    /* Bottom tint: semi-transparent orange */
    ),
    url('mushroom-forest.jpg'); /* Your forest image */
    
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #f0f8ff;

  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
}

/* ================================
   Content boxes for readability
   ================================ */
h1, h3, p, ul {
  /*background-color: rgba(255, 255, 255, 0.85);*/
  background-color: #d2b48c;
  padding: 15px;
  border-radius: 10px;
  /* box-shadow: 0 4px 8px rgba(0,0,0,0.15); */
  max-width: 800px;
  margin-bottom: 20px;
  
  box-shadow: 
  rgba(0, 0, 0, 0.25) 0px 54px 55px, 
  rgba(0, 0, 0, 0.12) 0px -12px 30px, 
  rgba(0, 0, 0, 0.12) 0px 4px 6px, 
  rgba(0, 0, 0, 0.17) 0px 12px 13px, 
  rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

/* Center the main content */
body > * {
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   Links styling
   ================================ */
a {
  color: #ffcc00;  /* Golden links for contrast */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ================================
   Lists spacing
   ================================ */
ul {
  list-style-type: disc;
  padding-left: 40px;
}