/* * * The fonts. * */ @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap"); /* * * The resetter. * */ * { margin: 0; padding: 0; color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; text-align: inherit; text-decoration: none; box-sizing: border-box; } /* * * The variables. * */ :root { --Color-Background: #fff; --Color-Text: #000; --Color-Gray: #ddd; --Font-Weight-Thin: 300; --Font-Weight-Base: 400; --Font-Weight-Semi-Bold: 600; --Font-Weight-Bold: 700; --Font-Weight-Very-Bold: 900; --Font-Size-Tiny: 0.95rem; --Font-Size-Base: 1.05rem; --Font-Size-Medium: 1.25rem; --Font-Size-Large: 1.5rem; --Font-Size-Huge: 2rem; --Font-Size-Enormous: 3rem; --Font-Family: "Merriweather", Cambria, Georgia, "Times New Roman", serif; --Text-Width: 60rem; --Space-Micro: 0.2rem; --Space-Tiny: 0.5rem; --Space-Small: 1rem; --Space-Medium: 1.5rem; --Space-Base: 2rem; --Space-Large: 4.5rem; } /* * * The major elements of the layout. * */ body { margin: 0 auto; padding: 0 var(--Space-Base); max-width: var(--Text-Width); color: var(--Color-Text); font-size: var(--Font-Size-Base); font-weight: var(--Font-Weight-Base); font-family: var(--Font-Family); background: var(--Color-Background); } body > header, body > footer { margin: var(--Space-Large) 0; } body > header { display: flex; align-items: center; justify-content: space-between; gap: var(--Space-Base); } body > header .LanguageSwitch { display: flex; gap: var(--Space-Tiny); } body > header .LanguageSwitch a { filter: grayscale(1); } body > header .LanguageSwitch a:hover, body > header .LanguageSwitch a:focus { filter: grayscale(0); background: inherit; } body > header .LanguageSwitch img { margin: 0; width: auto; height: 3rem; } body > footer { text-align: right; } body > footer > p { margin-bottom: 0; } /* * * The generic layout elements. * */ article > *:not(.Prologue) { margin-top: var(--Space-Large); } article > *:last-child { margin-bottom: var(--Space-Large); } figure, h4, header, p { margin-bottom: var(--Space-Base); } header time { display: block; margin-top: var(--Space-Tiny); font-size: var(--Font-Size-Large); font-weight: var(--Font-Weight-Thin); } section { clear: both; } /* * * The tables. * */ table { width: 100%; border-collapse: collapse; } table caption { margin-bottom: var(--Space-Small); padding: 0 var(--Space-Small) var(--Space-Small) var(--Space-Small); font-size: var(--Font-Size-Large); font-weight: var(--Font-Weight-Bold); text-align: center; text-transform: uppercase; border-bottom: thick double var(--Color-Text); } td, th { padding: var(--Space-Tiny); border: 1px solid var(--Color-Gray); border-right: thick double var(--Color-Gray); } .Index td { padding: var(--Space-Tiny) 0; border-width: 0; } .Index td:last-child { text-align: right; } th { font-weight: var(--Font-Weight-Bold); text-transform: uppercase; border-bottom: thick double var(--Color-Gray); } td:first-child, th:first-child { border-left-width: 0; } td:last-child, th:last-child { border-right-width: 0; } tr:first-child td, tr:first-child th { border-top-width: 0; } tr:last-child td { border-bottom-width: 0; } /* * * The figures. * */ figure { padding: 0 var(--Space-Base); } figcaption { padding: 0 var(--Space-Small); font-size: var(--Font-Size-Tiny); font-weight: var(--Font-Weight-Semi-Bold); text-align: center; } blockquote, code { font-size: var(--Font-Size-Large); font-weight: var(--Font-Weight-Thin); font-style: italic; } blockquote + figcaption::before, code + figcaption::before { content: "— "; } code { white-space: pre; } q { font-style: italic; } ol { list-style-position: inside; } ul { list-style-position: inside; list-style-type: "— "; } li { padding: var(--Space-Micro) 0; } img { margin-bottom: var(--Space-Tiny); width: 100%; border: 1px solid var(--Color-Gray); } img.Selfie { float: inline-end; margin: 0 0 var(--Space-Large) var(--Space-Large); width: 25%; } /* * * The text. * */ a { font-weight: var(--Font-Weight-Bold); text-decoration: underline dotted 2px; text-underline-offset: 3px; } header a { display: inline-block; font-weight: inherit; } a:not(.Image):focus, a:not(.Image):hover { color: var(--Color-Background); background: var(--Color-Text); } h1 { font-size: var(--Font-Size-Huge); font-weight: var(--Font-Weight-Very-Bold); } h2 { font-size: var(--Font-Size-Huge); font-weight: var(--Font-Weight-Bold); } h3 { display: flex; align-items: center; font-size: var(--Font-Size-Large); font-weight: var(--Font-Weight-Semi-Bold); text-transform: uppercase; letter-spacing: 0.1em; } h3::after { content: ""; margin-left: var(--Space-Small); height: 2px; flex-grow: 1; background: var(--Color-Text); } h4 { position: relative; font-weight: var(--Font-Weight-Bold); text-transform: uppercase; letter-spacing: 0.1em; } h4::before { content: "❧"; position: absolute; left: calc(-1 * var(--Space-Medium)); } p { hyphens: auto; line-height: 1.7; text-align: justify; text-justify: inter-character; initial-letter: 2; } .Prologue p { font-size: var(--Font-Size-Medium); font-weight: var(--Font-Weight-Thin); font-style: italic; } .Prologue p em { font-style: normal; } strong { font-weight: var(--Font-Weight-Bold); } /* * * The mobile stylesheet. * */ @media only screen and (max-width: 600px) { /* * * The major elements of the layout. * */ body { padding: 0 var(--Space-Small); } body > header { flex-direction: column; gap: var(--Space-Small); } body > header > div:first-child { width: 66%; text-align: center; } body > footer { text-align: center; } /* * * The generic layout elements. * */ article > header { display: block; } /* * * The tables. * */ .Index td { display: block; padding-top: 0; } .Index td:first-child { font-size: var(--Font-Size-Medium); } .Index td:last-child { text-align: inherit; } .Index tr { display: block; margin-bottom: var(--Space-Small); } /* * * The figures. * */ figure { padding: 0; } img.Selfie { display: block; float: none; margin: var(--Space-Large); width: 66%; } /* * * The text. * */ h3 { padding-bottom: var(--Space-Tiny); border-bottom: 2px solid var(--Color-Text); } h3::after { display: none; } h4::before { content: ""; } } /* * * The printing stylesheet. * */ @media print { /* * * The major elements of the layout. * */ body { margin: 0; padding: 0; max-width: none; } body > header { display: none; } /* * * The text. * */ header a { text-decoration: none; } h3::after { display: none; } }