body { background-color: #202020; /* Deeper dark background */ color: #d0d0d0; /* Aged text color */ font-family: "Georgia", serif; /* Change to a font with timeless quality */ margin: 0; padding: 20px; text-align: center; /* Keep central focus */ min-height: 100vh; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; } .js-loading { visibility: hidden; } h1 { color: #f0e68c; /* Gold-like color for a touch of hidden treasure */ font-style: italic; /* A hint of the unconventional */ font-size: 4rem; /* Relative to the font size of the root element () */ text-shadow: 1px 1px 2px #000; /* Soft shadow for depth */ margin-bottom: 40px; /* Increased space for a more dramatic intro */ text-align: center; width: 100%; } #haiku { background-color: #2b2b2b; /* Slightly lighter, for aged paper effect */ border: 2px dashed #555; /* Dashed border for a less refined look */ color: #a9a9a9; /* Faded text color for that forgotten feel */ font-family: "Courier New", Courier, monospace; /* Bringing back the typewriter vibe */ font-size: 1.2rem; /* Relative to the font size of the root element () */ padding: 30px; text-align: left; max-width: 700px; margin: 20px auto; /* Centered with space for readability */ box-shadow: 3px 3px 5px #000; /* Soft shadow for a pop-up effect */ transform: rotate(-1deg); /* Slightly rotated for an artistic touch */ hyphens: auto; /* Enable hyphenation for better text flow */ } #haiku + .long-form-content { margin-top: 40px; /* Larger top margin for the first long-form-content following haiku */ } .long-form-content { background-color: #2b2b2b; /* Consistent with haiku box for visual harmony */ border: 2px dashed #555; /* Matching style to integrate with the site's theme */ color: #a9a9a9; /* Ensures readability with a faded text color */ font-family: "Georgia", serif; /* Maintains the overall site typography */ font-size: 1.2rem; /* Relative to the font size of the root element () */ padding: 20px; padding-top: 1%; text-align: justify; /* Improves readability for long-form text */ min-width: 300px; /* Prevents content from becoming too narrow */ max-width: 600px; /* Wider than haiku for extended content */ margin: 40px auto; /* More top margin to distinguish from haiku section */ margin-bottom: 20px; /* Consistent bottom margin */ box-shadow: 3px 3px 5px #000; /* Consistent shadow effect for depth */ } .long-form-content + .long-form-content { margin-top: 20px; /* Smaller top margin for subsequent long-form-content boxes */ } @media (min-width: 700px) { /* Media query for larger screens */ body { display: flex; flex-direction: column; /* Vertical stacking for logical content flow */ align-items: center; /* Align items for a neat layout */ height: auto; /* Adjust height dynamically for content */ } } @media (max-width: 600px) { /* Media query for smaller screens */ h1 { font-size: 2.5rem; /* Smaller font size for h1 */ margin-bottom: 20px; /* Reduced margin */ } body { padding: 10px; /* Reduced padding */ font-size: 14px; /* Adjust base font size if necessary */ } #haiku, .long-form-content { font-size: 1rem; /* Smaller font size for content */ padding: 15px; /* Reduced padding */ margin: 10px auto; /* Reduced margin */ max-width: 100%; /* Allow boxes to expand to screen width */ } .long-form-content + .long-form-content { margin-top: 15px; /* Reduced spacing between content blocks */ } } .top-nav { background-color: #202020; border-bottom: 1px dashed #555; padding: 0.5rem; position: sticky; top: 0; z-index: 1000; margin-bottom: 1rem; } .nav-links { display: flex; justify-content: center; gap: 2rem; } .nav-links a { color: #808080; text-decoration: none; transition: color 0.2s ease; font-family: "Georgia", serif; font-size: 0.9rem; padding: 0.3rem 0; } .nav-links a:hover { color: #f0e68c; } @media (max-width: 600px) { .nav-links { gap: 1rem; } .nav-links a { font-size: 0.8rem; } } .long-form-content h2 { scroll-margin-top: 60px; } .long-form-content h2 a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .long-form-content h2 a:hover { color: #f8f8f8; } .long-form-content h2:hover::after { content: " #"; opacity: 0.7; font-weight: normal; }