/* Stylesheet for the redesigned Agony Engine website. Uses new cropped assets provided by the user. There is no overlay; instead we rely on the dark stone background image to set the mood. All buttons and tabs are represented by images and sized relative to their natural dimensions. */ /* Base body text */ html, body { margin: 0; padding: 0; font-family: "IM Fell English", Georgia, "Times New Roman", serif; font-size: 1.2rem; /* was 1.05rem */ line-height: 1.75; /* was 1.7 — slightly more breathing room for larger text */ color: #e8dedd; } .mainBody { background: url('images/background.png') no-repeat center center fixed; background-size: cover; } header img { width: 100%; display: block; } /* Navigation bar: uses tab images for each link. */ nav.tabs { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.5rem 0; } nav.tabs a { display: block; line-height: 0; /* remove whitespace gap below image */ } nav.tabs a img { display: block; height: 40px; width: auto; } /* Hero section ... */ .hero { position: relative; max-width: 1024px; margin: 1rem auto; text-align: center; } .hero img.main-frame { width: 100%; height: auto; display: block; } .hero img.sub-frame { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 100%; height: auto; } /* Start engine button */ .start-engine { text-align: center; margin: 1rem 0; } .start-engine img { width: 320px; height: auto; } /* Buttons grid on the home page */ .buttons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1024px; margin: 2rem auto 3rem; padding: 0 1rem; } .buttons-grid a { display: block; line-height: 0; } .buttons-grid a img { width: 100%; height: auto; border-radius: 20px; } /* ---- Gothic typography ---- */ /* Display headings */ h1 { font-family: "Pirata One", "Old English Text MT", "Blackadder ITC", serif; font-weight: 400; font-size: 3.4rem; /* was 2.8rem */ letter-spacing: 0.02em; text-transform: none; text-align: center; color: #e8cdd8; margin-top: 1rem; margin-bottom: 0.75rem; } /* Subheadings */ h2 { font-family: "Metamorphous", "Cinzel", "Copperplate", serif; font-weight: 400; font-size: 2rem; /* was 1.7rem */ letter-spacing: 0.03em; text-transform: none; color: #e8cdd8; margin-top: 1rem; margin-bottom: 0.5rem; } h3 { font-family: "Cinzel", "Copperplate", "Trajan Pro", serif; font-weight: 600; font-size: 1.5rem; /* was 1.3rem */ letter-spacing: 0.08em; text-transform: uppercase; color: #e8cdd8; margin-top: 1rem; margin-bottom: 0.5rem; } /* Body text — inherits IM Fell English from */ p { margin: 0.6rem 0; line-height: 1.7; } /* Emphasis styling */ em, i { font-family: "IM Fell English", Georgia, serif; font-style: italic; color: #f0d8a8; /* subtle warm tint for emphasis */ } strong, b { font-family: "IM Fell English", Georgia, serif; font-weight: 700; color: #c9a227; /* gold accent on key terms */ } ul { margin: 0.8rem 0 0.8rem 1.2rem; } li { margin-bottom: 0.5rem; } /* Improve readability: add subtle text shadows behind light text on the marbled stone background. The shadow offsets and blur radius create a soft halo that separates text from the busy background without overpowering the design. Applied to headings, paragraphs and list items. */ h1, h2, h3, p, li { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.85); } /* ---- Tab frame: large, centered, borderless, auto-height ---- */ .tabFrame { display: block; width: 90%; max-width: 1200px; margin: 2rem auto 4rem; /* single margin declaration */ padding: 2rem; /* padding lives inside each lore page, not on the iframe */ border: none; background: rgba(0, 0, 0, 0.7); color: #f5e9e7; overflow: hidden; /* belt & suspenders with scrolling="no" */ } /* ---- Selected tab glow ---- */ .tabs a img { transition: filter 0.2s ease, transform 0.2s ease; } .tabs a.active img { filter: brightness(1.15) drop-shadow(0 0 8px #c9a227) drop-shadow(0 0 16px #c9a227); transform: translateY(1px); } /* Optional: subtle hover glow on non-active tabs for feedback */ .tabs a:hover img { filter: brightness(1.08) drop-shadow(0 0 4px #c9a227); }