/* ========================= Base theme variables ========================= */ :root{ --bone: #f5f1e8; /* warm bone / parchment */ --georgetown-green: #0b3d2e; /* deep green */ } /* ========================= Layout / typography ========================= */ html, body{ height: 100%; } body{ margin: 0; min-height: 100vh; background-color: var(--bone); color: var(--georgetown-green); font-family: "EB Garamond", Garamond, "Times New Roman", serif; display: flex; justify-content: center; align-items: center; text-align: center; } /* Main content container */ .page{ max-width: 720px; width: min(720px, calc(100% - 48px)); padding: 60px 24px; } /* Make sure headings/paragraphs are centered */ h1, h2, p, footer{ text-align: center; margin-left: auto; margin-right: auto; } /* Optional: tighten the vibe a touch */ .site-name{ margin: 0; font-weight: 600; letter-spacing: 0.02em; } .title{ margin: 0; font-weight: 400; } /* Dividers */ .divider{ width: 120px; height: 1px; background-color: var(--georgetown-green); margin: 30px auto; opacity: 0.6; } /* Button */ .btn{ display: inline-block; margin: 30px auto; padding: 12px 28px; border: 1px solid var(--georgetown-green); color: var(--georgetown-green); text-decoration: none; letter-spacing: 0.08em; font-size: 0.9rem; } .btn:hover{ background-color: var(--georgetown-green); color: var(--bone); } /* Email line */ .email a{ color: inherit; text-decoration: underline; } /* Corners */ .corner{ position: fixed; opacity: 0.35; pointer-events: none; z-index: 0; } .page{ position: relative; z-index: 1; } /* If your HTML uses these corner position classes */ .corner.top-right{ top: 0; right: 0; } .corner.bottom-right{ bottom: 0; right: 0; } /* ========================= Optional retro mode (only when ) ========================= */ body.retro{ background: #000; color: #0f0; font-family: "Courier New", Courier, monospace; } body.retro a{ color: #0ff; } body.retro a:hover{ color: #ff0; } body.retro .divider{ background-color: #0f0; opacity: 1; } body.retro .btn{ border-color: #0f0; color: #0f0; } body.retro .btn:hover{ background: #0f0; color: #000; } /* Gallery helpers (only really relevant on gallery.html) */ .gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .gallery img{ width: 100%; height: 140px; object-fit: cover; } body.retro .gallery img{ border: 2px solid #0f0; image-rendering: pixelated; } body.retro .gallery a:hover img{ border-color: #ff0; }