@font-face { font-family: "EB Garamond"; src: url(EBGaramond-Regular.subset.woff2); } @font-face { font-family: "EB Garamond"; font-weight: 500; src: url(EBGaramond-Medium.subset.woff2); } @font-face { font-family: "EB Garamond"; font-style: italic; src: url(EBGaramond-Italic.subset.woff2); } * { box-sizing: border-box; } body { margin: .8em auto; max-width: 90%; width: 50em; position: relative; left: clamp(-2em,calc(25em - 45%),0em); display: grid; grid-template-columns: auto auto; font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.38; overflow-wrap: break-word; text-rendering: optimizeLegibility; background: #fff; color: #333; } address, .right { align-self: center; } .left { padding-right: .9rem; text-align: right; color: #246d84; } .right { border-left: solid 3px #246d84; padding: .2rem 0 0 1rem; } .gap { margin-top: .8rem; grid-column: 1/-1; } .entry-header > :nth-child(1) { flex: 60%; max-width: max-content; margin-right: auto; } .taddr { grid-row: 1; align-self: center; } b, strong { font-weight: 500; } b { font-size: 1.1em; } .date { text-align: right; margin-left: 1.2em; max-width: max-content; flex: 10 0 auto; width: min-content; } .title { line-height: 1.22; } .entry-header { display: flex; } section + section { margin-top: .7em; } address, .h1s { color: #666; } address { font-size: .9em; } .icon { vertical-align: middle; margin-bottom: .5ex; } h1, h2, h3, h4, p, ul { margin: 0; } h1, h2, h3, h4 { font-weight: normal; } h1 { font-size: 3em; margin-top: -.5ex; } h4 { display: inline; } ul { padding: 0; list-style: none; } ul:not(.fakelist) > li { margin-left: .1em; /* separate list-style-type for safari <14.1 support */ list-style-type: '◦ '; list-style-image: url("data:image/svg+xml,"); list-style-position: inside; } a { color: #06c; text-decoration: none; } a:visited { color: #0f00b0; } .date-punct, .hide, .print { display: none; } .nb { display: inline-block; } abbr { text-decoration: none; } .h1s { font-size: 1.4em; font-style: italic; } @media (min-width: 25em) { .left-heavy-columns { columns: 2 14em; margin-right: -1.4em; } } @media (max-width: 30em) { body { display: block; } h1 { margin-bottom: -.2ex; } .h1s { margin-bottom: .6ex; } .title { text-align: center; } .left address { columns: 2; } .left { text-align: center; padding: 0; min-width: 0; } .left:not(.taddr) { border-bottom: solid; margin-bottom: .2rem; } .gap { margin-bottom: 1rem; } .right { border-left: none; padding: 0; } .title { padding: 0; } .nb { display: initial; } } @media (max-width: 21em) { header, .entry-header { display: block; } .date { text-align: left; margin: 0; width: auto; } .date-punct { display: inline; } } @media print { .noprint { display: none; } body { position: static; margin: 0; padding: 0; width: 100%; max-width: 100%; font-size: 13px; line-height: 1.28; color: #000; -webkit-print-color-adjust: exact; } /* workaround: safari doesn't support css columns in print */ .left-heavy-columns { display: none; } .print { display: inline-block; } section + section { margin-top: .6em; } /* override print color for firefox */ address, .h1s { color: transparent; text-shadow: 0 0 #555; } address svg { color: #555; } @page { margin: 7mm 26mm 7mm 18mm; } } @media (prefers-contrast: high) { .h1s, address { color: #555; } } @media (prefers-contrast: low) { body { background: #ccc; } }