Explore the afterlife realms from cultures around the world
Explore the afterlife realms from cultures around the world
\nconcepts.scroll\nconcepts\n printTable\nfooter.scroll\n\n---header.scroll---\nimportOnly\nbuildHtml\nhomeButton\nmetaTags\neditButton\neditBaseUrl /edit.html?folderName=underworlds.scroll.pub&fileName=\nmetaTags\nstyle.css\nscript.js\n\n---footer.scroll---\nimportOnly\ncenter\nscrollVersionLink\n\n---style.css---\n:root {\n --primary: #5e2c99;\n --secondary: #301934;\n --accent: #9b59b6;\n --light: #f5e6ff;\n --dark: #1a001a;\n}\n\nbody {\n font-family: 'Georgia', serif;\n line-height: 1.6;\n color: var(--dark);\n background-color: var(--light);\n margin: 0;\n padding: 0;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n padding: 2rem 1rem;\n text-align: center;\n border-bottom: 4px solid var(--accent);\n}\n\nh1 {\n margin: 0;\n font-size: 2.5rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n}\n\nheader p {\n font-size: 1.2rem;\n max-width: 800px;\n margin: 1rem auto;\n}\n\nmain {\n max-width: 1000px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n background: white;\n}\n\nth {\n background-color: var(--primary);\n color: white;\n padding: 1rem;\n text-align: left;\n}\n\ntd {\n padding: 0.8rem 1rem;\n border-bottom: 1px solid #eee;\n}\n\ntr:nth-child(even) {\n background-color: #f9f3ff;\n}\n\ntr:hover {\n background-color: #f0e0ff;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: var(--dark);\n border-top: 1px solid #ddd;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n table {\n display: block;\n overflow-x: auto;\n }\n \n th, td {\n padding: 0.6rem;\n font-size: 0.9rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Add animation to table rows\n const rows = document.querySelectorAll('tbody tr');\n rows.forEach((row, index) => {\n row.style.opacity = '0';\n row.style.transform = 'translateY(20px)';\n row.style.transition = `all 0.3s ease ${index * 0.1}s`;\n \n setTimeout(() => {\n row.style.opacity = '1';\n row.style.transform = 'translateY(0)';\n }, 100);\n });\n \n // Add click effect to table rows\n rows.forEach(row => {\n row.addEventListener('click', function() {\n this.style.backgroundColor = '#f0e0ff';\n setTimeout(() => {\n this.style.backgroundColor = '';\n }, 300);\n });\n });\n});\n\n---end---"