article, aside, details, footer, header, hgroup, main, nav, section, summary { display: block; } html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 1em; line-height: 1.4; text-rendering: optimizelegibility; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; } body { color: rgba(0, 0, 0, 0.85); margin: 0; font-family: 'EB Garamond', serif; font-smooth: always; -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizelegibility; font-display: swap; font-display: optional; -moz-osx-font-smoothing: grayscale; -webkit-osx-font-smoothing: antialiased; background: aliceblue; } /* Anchors */ a { color: #1177FF; text-decoration: none; text-rendering: optimizelegibility; outline: 0; &:focus, &:active, &:hover { outline: 0; } } /* Typography */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: monospace; } h1 { font-size: 280%; font-weight: normal; } h2 { font-size: 200%; font-weight: normal; } h3 { font-size: 150%; } h4 { font-size: 125%; } h5 { font-size: 110%; } h6 { font-size: 100%; } b, strong { font-weight: bold; } hr { -moz-box-sizing: content-box; box-sizing: content-box; display: block; height: 1px; border: 0; border-top: 2px solid #1177FF; margin: 1em 0; padding: 0; } p { margin: .8em 0; } menu, ul, ol { margin: 0; padding: 0; } menu, ul { list-style-image: none; list-style: none; } nav ul { list-style: none; list-style-image: none; } img { border: 0; -ms-interpolation-mode: bicubic; } /* Code formatting */ pre, code { border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eff; } code { padding: 1px 5px; } pre { padding: 8px 12px; overflow-x: auto; >code { border: 0; padding-right: 0; padding-left: 0; } } blockquote { color: #333; border-left: 10px solid #1177FF; letter-spacing: -1px; padding: 0.8em; margin: 2em auto; font-style: italic; background: #fffafa; > :last-child { margin-bottom: 0.8em; } } /*-- Coloring pseudos text selection/inactive state. Sooth! :D --*/ * { box-sizing: border-box; &:after { box-sizing: border-box; } &:before { box-sizing: border-box; } } ::-moz-selection { background: #a7d7ff; color: #000; text-shadow: none; } ::selection { background: #a7d7ff; color: #000; text-shadow: none; &:window-inactive { background: #eaeaea; color: #000; } } input:-webkit-autofill { -webkit-box-shadow: 0 0 1000px #FBFBFB inset; } ::-webkit-input-placeholder { color: #444 !important; font-size: 11px; } :-moz-placeholder { color: #444 !important; font-size: 13px; } ::-moz-placeholder { color: #444 !important; font-size: 13px; } :-ms-input-placeholder { color: #444 !important; font-size: 13px; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 1vw; vertical-align: top; } /* Element Positioning */ .container { margin: 46px 0 0 0; background: white; } .wrapper { margin: 0 auto; text-align: justify; } .left { float: left; left: 0; } .right { float: right; right: 0; } .center { text-align: center; margin: 0 auto; } .centerize { margin: 0 auto; } .fixed { position: fixed; will-change: transform; transform: translateZ(0); } .top { top: 0; } .bottom { bottom: 0px; } .absolute-center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .fold { min-height: calc(90vh - 45px); max-width: 100vw; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* -- Push aside, out & away ---*/ .side-gap { margin-right: .5em; margin-left: .5em; } .top-gap { margin-top: .5em; } .double-top-gap { margin-top: 1em; } .bottom-gap { margin-bottom: 1em; } .double-bottom-gap { margin-bottom: 2em; } .pad { padding: 0.5em 1em; } .pad-vertically { padding: 1em 0; } .pad-horizontally { padding: 0 1em; } /* -- Text --*/ .justify { text-align: justify; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .camelcase { text-transform: capitalize; } .italics { font-style: italic; } menu.horizontal-list li, ul.horizontal-list li { float: left; } .will-change { will-change: transform; transform: translate3d(0, 0, 0); } .unpointable { pointer-events: none; } .pointable { pointer-events: auto; } /*** Table Styles **/ table { background: white; border-radius: 3px; border-collapse: collapse; height: 32vw; margin: 2vw auto; max-width: 100%; padding: 0.5vw; width: 100%; box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); } th { color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-weight: 100; padding: 2.4vw; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; &:first-child { border-top-left-radius: 3px; } &:last-child { border-top-right-radius: 3px; border-right: none; } } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); &:first-child { border-top: none; } &:last-child { border-bottom: none; } &:nth-child(odd) td { background: #EBEBEB; } &:last-child td { &:first-child { border-bottom-left-radius: 3px; } &:last-child { border-bottom-right-radius: 3px; } } } td { background: #FFFFFF; padding: 1.5vw; text-align: left; vertical-align: middle; font-weight: 300; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; &:last-child { border-right: 0px; } } th, td { &.text-left { text-align: left; } &.text-center { text-align: center; } &.text-right { text-align: right; } } .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; &:before { content: ""; display: block; width: 0; height: 150%; } } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; &.focusable { &:active, &:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } } } .invisible { visibility: hidden; } .clearfix { &:before { content: " "; display: table; } &:after { content: " "; display: table; clear: both; } *zoom: 1; } @media (orientation: portrait) { body { .hide-on-mobiles { display: none; } .display-on-mobiles { display: inline-block; } .divide-in-half { width: 90vw; } .one-half { width: 100%; } .one-third { width: 100%; } .two-third { width: 100%; } .shrink { width: 95%; } .align { margin: 0 auto; text-align: center; } } } @media (orientation: landscape) { body { .hide-on-mobiles { display: marker; } .display-on-mobiles { display: none; } .divide-in-half { width: 50vw; } .one-half { width: 50%; } .one-third { width: 33.33333%; } .two-third { width: 66.66666%; } .shrink { width: 90%; } .align { margin: 0 0; } .container { width: calc(100vw - 208px); margin-left: 208px; } } } @media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a { text-decoration: underline; &:visited { text-decoration: underline; } &[href]:after { content: " (" attr(href) ")"; } } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } a { &[href^="javascript:"]:after, &[href^="#"]:after { content: ""; } } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr { page-break-inside: avoid; } img { page-break-inside: avoid; max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }