/* Notes rem is a relative CSS unit that stands for "root em," meaning its value is calculated based on the font size of the root element (typically the tag). For most browsers, the default font size is 16px. */ /* Reset defaults */ /* 1. Use a more-intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* 3. Enable keyword animations */ @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { /* 4. Add accessible line-height */ line-height: 1.5; /* 5. Improve text rendering */ -webkit-font-smoothing: antialiased; } /* 6. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 7. Inherit fonts for form controls */ input, button, textarea, select { font: inherit; } /* 8. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 9. Improve line wrapping */ p { text-wrap: pretty; } /* 10. Root stacking context */ #root, #__next { isolation: isolate; } /* Define site wide values */ :root { --text-color: #474B47; /* very dark gray green */ --background-color: #AEB5AF; /* dark gray green */ --highlight-color-1: #C8D4C8; /* light gray green */ --highlight-color-2: #FFDFDD; /* pink */ --panel-color: #FDE8D1; /* tan */ --panel-highlight-color: #BFAD9A; /* dark tan */ --panel-notes-background-color: #FFF1E1; /* pale tan */ --panel-notes-text-color: #4E544E; /* gray green */ --paypal-panel-background-color: #FDD1A2; /* golden tan */ --sitename-color: #8B3A62; /* purple */ --site-max-width: 1280px; --site-min-width: 320px; } /* Begin font definitions */ /* Open Sans for most text */ /* latin-ext */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url('/fonts/opensans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06F15M.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url('/fonts/opensans/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url('/fonts/opensans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url('/fonts/opensans/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Gentium Book Plus for essay text */ /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/gentiumbookplus/vEFN2-RHBgUK5fbjKxRpbBtJPyRpocKdT7_mqfPV.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/gentiumbookplus/vEFN2-RHBgUK5fbjKxRpbBtJPyRpocKdT7HmqQ.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/gentiumbookplus/vEFA2-RHBgUK5fbjKxRpbBtJPyRpocKdRwrDvML0eIe1.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/gentiumbookplus/vEFA2-RHBgUK5fbjKxRpbBtJPyRpocKdRwrDvMz0eA.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/gentiumbookplus/vEFL2-RHBgUK5fbjKxRpbBtJPyRpocKWf7P-rQ.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/gentiumbookplus/vEFL2-RHBgUK5fbjKxRpbBtJPyRpocKYf7M.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/gentiumbookplus/vEFO2-RHBgUK5fbjKxRpbBtJPyRpocojWqbPjM7sfA.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/gentiumbookplus/vEFO2-RHBgUK5fbjKxRpbBtJPyRpocojWqbBjM4.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Nunito Sans for site title */ /* latin-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-stretch: 100%; font-display: swap; src: url('/fonts/nunitosans/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJPxzGOF.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-stretch: 100%; font-display: swap; src: url('/fonts/nunitosans/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJ3xzA.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Playfair Display for Hero Title */ /* latin-ext */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/playfairdisplay/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/playfairdisplay/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfairdisplay/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfairdisplay/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Begin normal CSS definitions */ * { margin: 0px; padding: 0px; } html { font-size: 16px; /* just to be sure; normal default is 16px */ font-family: "Open Sans", sans-serif; } body { color: var(--text-color); background-color: var(--background-color); text-align: center; max-width: var(--site-max-width); min-width: var(--site-min-width); margin: 0 auto; padding: 0 20px; font-size: clamp(1rem, round(0.833rem + 0.833vi, 0.05em), 1.5rem) } main { margin-top: 1.56vi; background: var(--panel-color); text-align: left; padding: 1.88vi; border-radius: 5px; } main p { margin-bottom: clamp(0.625rem, round(0.417rem + 1.042vi, 0.05em), 1.25rem); } main > p:last-child { margin-bottom: 0; } /* Site Title */ h1 { font-size: clamp(1rem, 0.458rem + 2.708vi, 2.625rem); color: var(--sitename-color); font-family: "Nunito Sans", sans-serif; font-weight: 400; margin-right: clamp(0.25rem, round(0.083rem + 0.833vi, 0.05em), 0.75rem); margin-top: clamp(0.1875rem, round(0.7708rem + -0.7292vi, 0.05em), 0.625rem); padding-bottom: 0px; margin-bottom: clamp(-0.625rem, round(0.2083rem + -1.0417vi, 0.05em), 0rem); px; } h2 { /* contained within .tagline */ font-size: clamp(0.625rem, round(0.458rem + 0.833vi, 0.05em), 1.125rem); font-weight: 400; line-height: 125%; font-family: "Gentium Book Plus", serif; font-style: italic; } h3 { margin-bottom: 1.56vi; } blockquote { margin: 1.9vw 6.25vi; padding: 0.6vw 0.7vi; font-style: italic; } blockquote p { display: inline; } .book-title { font-style: italic; } .sitename-container { display: grid; justify-items: end; grid-template-columns: clamp(2.938rem, round(2.521rem + 2.083vi, 0.05em), 4.188rem) auto clamp(1.75rem, round(1.5rem + 1.25vi, 0.05em), 2.5rem); background-color: var(--background-color); padding-top: 1rem; } .sitename-container div { padding: 0; text-align: right; } .sitename-container .photo { display: block; align-self: flex-end; grid-row: span 2; width: clamp(2.938rem, round(2.521rem + 2.083vi, 0.05em), 4.188rem); height: auto; margin-bottom: clamp(0.188rem, round(0.125rem + 0.313vi, 0.05em), 0.375rem); } .sitename-container .logo { margin-top: clamp(0rem, round(-0.208rem + 1.042vi, 0.05em), 0.625rem); width: clamp(1.75rem, round(1.5rem + 1.25vi, 0.05em), 2.5rem); height: auto; } .tagline { /* text marked as h2 */ grid-column: 2 / span 2; margin-bottom: clamp(0.3125rem, round(0.2083rem + 0.5208vi, 0.05em), 0.625rem); } footer { font-size: 70%; display: flex; align-items: flex-end; margin-top: clamp(1.25rem, round(0.666rem + 3.112vi, 0.05em), 3rem); } footer .copyright { font-weight: bold; line-height: 135%; } footer .infringement { width: clamp(192px, 60%, 450px); margin: 0 auto; line-height: clamp(0.875rem, round(0.646rem + 1.146vi, 0.05em), 1.563rem); } footer .footer-text { } footer .footer-image { width: clamp(155px, 100%, 255px); height: auto; } .news { margin-top: 1.56vi; background: var(--panel-color); text-align: center; padding: 0.5rem; border-radius: 5px; } a { color: var(--sitename-color); } .front-page-about-text { margin-block: clamp(0.438rem, round(0rem + 2.188vi, 0.05em), 1.75rem); /* top and bottom */ margin-inline: clamp(0rem, round(-3.75rem + 18.75vi, 0.05em), 11.25rem); /* left and right */ } .main-title { font-weight: bold; font-size: 90%; color: var(--text-color); letter-spacing: clamp(0rem, round(-0.063rem + 0.313vi, 0.05em), 0.188rem); text-align: right; padding-block: clamp(0rem, round(-0.063rem + 0.313vi, 0.05em), 0.188rem); padding-inline: 0; text-transform: uppercase; border-top: solid 2px var(--panel-highlight-color); border-bottom: solid 2px var(--panel-highlight-color); margin-bottom: clamp(0.313rem, round(0rem + 1.563vi, 0.05em), 1.25rem); } .hrule { margin-block: clamp(0.25rem, round(0rem + 1.25vi, 0.05em), 1rem); border: solid 1px var(--panel-highlight-color); height: 0; } .pips { text-align: center; margin-block: clamp(0.313rem, round(0rem + 1.563vi, 0.05em), 1.25rem); margin-inline: auto auto; font-size: 75%; color: var(--panel-highlight-color); } .video-container { position: relative; margin-inline: auto; width: 100%; max-width: 900px; } .video-container iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }