@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@700&family=Spirax&display=swap");
/* Ensure the header is properly positioned */

/* Ensure the content area is centered under the intro image */
#poems {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 400px); 
  padding-top: 2rem; 
}
#poems .container {
  max-width: 800px; 
  text-align: left; 
}
/* General paragraph styling */
p {
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;       
  font-size: 20px;
  line-height: 1.6;
  text-align: left; /* Ensure flush-left alignment */
}
/* Drop cap styling */
p:first-of-type:first-letter {
  font-family: "Spirax", serif; /* Add fallback font */
  float: left; /* Create the drop-cap effect */
  font-size: 3em; /* Adjust size to better fit the layout */
  line-height: 0.9; /* Ensure proper spacing with the text */
  margin-right: 0.2em; /* Add space between the drop cap and text */
  margin-top: 0.1em; /* Nudge the letter for better alignment */
  color: #000; /* Optional: Set a contrasting color */
}

/* Optional: Style the cite */
cite {
  font-style: italic;
  font-size: 16px;
  display: block;
  margin-top: 1.5rem;
  text-align: left; /* Keep it aligned with the text */
}
/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* Slightly move text down for a smoother effect */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}