@font-face { font-family: 'Audiowide'; src: url('font/Audiowide-Regular.woff2') format('woff2'), url('font/Audiowide-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } body { background: #000; color: #fff; /* font trickery */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; font-size: 26px; margin: 0px; padding: 0px 0px 1em 0px; font-family: Georgia, "Times New Roman", Times, serif; } body { /* background: #000 url(image/pinstripe_bg_dark.jpg); background-size: 612px; background-repeat: repeat; */ background: #111; color: #ddd; } a { font-weight: bold; color: #3399ff; } h1, h2, h3 { color: #fff; font-family: 'Audiowide', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 40px; line-height: 1.25em; font-weight: 300; } p { line-height: 1.5em; } footnote { font-size: 16px; } .video-wrapper { position: relative; } .video-wrapper video { margin-top: 0px; margin-bottom: 0px; } .non-italic { font-style: normal; } .tight-bottom { margin-bottom: 0px; padding-bottom: 0px; } .image-wrapper { display: inline-block; text-align: center; padding-bottom: 1em; } .image-wrapper img { padding-bottom: 0px; } .image-caption { text-align: center; font-style: italic; font-size: 16px; margin: 0px; padding: 0px; } .full-width-link { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; } .more-spacing { margin-top: 2em; margin-bottom: 2em; } .center { text-align: center; } .indent { padding-left: 1em; padding-right: 1em; } @supports (-webkit-touch-callout: none) { /* iOS: try to account for The Notch. */ .indent { margin-right: calc(env(safe-area-inset-right) / 2); margin-left: calc(env(safe-area-inset-left) / 2); } } .center-content { max-width: 42em; margin: 0px auto; } .quote { font-style: italic; } .nice-picture, .nice-picture-2up-container, .fullwidth-video { display: block; margin: 0px auto; width: 100%; max-width: 1920px; } .nice-picture { padding: 0.5vw 0px; box-sizing: border-box; } .nice-picture-2up-container { position: relative; width: 100%; /* collapse whitespace */ font-size: 0px; /* spacing, and center */ margin: 0.5vw auto; } .nice-picture-2up-container + .nice-picture { /* collapse sibling */ padding-top: 0px; } .nice-picture-2up { display: inline-block; width: 50%; box-sizing: border-box; max-width: 960px; margin-bottom: 0.5vw; vertical-align: top; } .nice-picture-2up:first-of-type { /* note: relative to , because of local font-size: 0 to collapse whitespace */ padding-right: 0.5vw; } .nice-picture-2up:last-of-type { padding-left: 0.5vw; } .fullwidth-video { height: 100%; max-height: 1080px; max-height: 100vh; } .portrait-video { /* presuming 1080x1920 */ /* max-width: 1080px; */ height: 100%; max-height: 1080px; max-height: 100vh; margin: 0px auto; } /* in landscape view, drop the 100vh constraint. */ @media screen and (orientation: landscape) { .fullwidth-video, .portrait-video { max-height: auto; } } #header { position: relative; } #header img { display: block; width: 100%; height: auto; } /* @media screen and (max-width: 1280px) and (orientation: landscape) { h1, h2, h3 { font-size: 24px; } } */ @media screen and (max-width: 980px) and (orientation: portrait) { body { font-size: 3vw; } footnote { font-size: 1.5vw; } h1, h2, h3 { font-size: 5.5vw; } .center-content { /* extra spacing on side of screen */ padding: 0px 32px; } } blockquote, footnote, h1, h2, h3, p, .video-wrapper, .image-caption { margin-left: calc(env(safe-area-inset-right)); margin-right: calc(env(safe-area-inset-left)); } blockquote { border-left: 4px solid #666; max-width: 36em; padding: 0px 1em; margin-left: 1em; font-size: 90%; } footnote, h1, h2, h3, p { padding: 0px 0.5em; } h3 { padding-left: 0.25em; } #logos { text-align: center; } #logos img { display: inline-block; vertical-align: middle; padding: 16px; max-width: 200px; max-height: 200px; }