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

/* 1. Imports the upright, handwritten Patrick Hand font */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

/* 2. Global page styling */
body {
  background-image: url('https://nateblog.neocities.org/Paper%20Background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  line-height: 1.3; /* Tighter line spacing to save vertical space */
  
  color: black;
  
  font-family: 'Patrick Hand', cursive;
  font-size: 20px; /* Slightly smaller to prevent excessive scrolling */
  
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 3. Tightens paragraph gaps to keep content compact */
p {
  margin-bottom: 12px;
}

.image-container {
  text-align: center;
}

.framed-art {
  border: 8px solid #5c4033;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}

a {
  color: #2b4c7e; /* Faded fountain pen blue */
  text-decoration: underline;
}

a:hover {
  color: #4a74b4; /* Lighter ink tone on hover */
  text-decoration: none;
}

a:visited {
  color: #1a3050; /* Deep blue-black for visited links */
}

/* 4. Journal Card Container styling for each dream entry */
.journal-card {
  background-color: #fafafa;
  background-image: linear-gradient(90deg, transparent 49px, #ffb3b3 49px, #ffb3b3 52px, transparent 52px), linear-gradient(#e1f0fa 1px, transparent 1px);
  background-size: 100% 100%, 100% 31px;
  padding: 35px 30px 25px 65px;
  margin-bottom: 35px;
  border-radius: 2px;
  box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.18);
}

/* 5. Highlight effect for the titles inside <h2><span> */
h2 span {
  background-color: rgba(254, 240, 138, 0.85); /* Soft highlighter yellow with 85% opacity */
  padding: 4px 12px; /* Cushion on the sides of the highlight */
  border-radius: 2px; /* Smooths out the edges of the marker stroke */
}

/* 6. Clean, fading divider line between entries */
.journal-divider {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  margin: 35px 0;
}