body { background: linear-gradient(210deg, #f0f8ff 20%, #fff8f0 90%); color: #000711; font-family: 'Fira Code', 'Fira Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-weight: 400; line-height: 1.5em; } body.page-home { margin: 0; align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; } a:link, a:visited, a:hover, a:active { color: #004CCA; } a:visited { color: rebeccapurple; } #container { flex: 1; display: flex; flex-direction: column; justify-content: center; } #vcard { position: relative; padding: 2em 3em; margin: 2em; width: auto; max-width: 52em; } #colophon { font-size: .875em; } #colophon code { font-size: .857em; } h1, h2, h3 { font-weight: normal; } h2, h3 { text-shadow: 1px 1px 2px #fff; } h1 { font-family: "Fira Code", "Cascadia Code", "Input Mono", "Fira Mono", "Liberation Mono", "Source Code Pro", monospace; font-size: 1.5em; font-weight: 300; line-height: 1.325em; } mark { background: cornflowerblue; color: #fff8f0; } h1 b { font-weight: 600; } h1 img { margin-bottom: .5em; } p { hyphens: auto; } p b { font-weight: 600; } h2 { margin: 1.5em 0 1em; text-shadow: 1px 1px 1px #fff; } footer { opacity: .85; font-size: 0.85em; text-align: center; } /* #vcard p::after { opacity: 0.15; font-size: .85em; content: '

'; margin-left: .25em; position: absolute; } */ /* body::before, body::after { opacity: 0.15; font-size: .85em; margin: .25em 0; content: ''; } body::before { content: ''; } */ footer p { margin: .5em 0; } @media screen and (max-width:56em) /* 896px */ { #vcard { margin: 1em; padding: .5em 1.5em; } } @media screen and (max-width:40em) /* 640px */ { #vcard { border: none; margin-top: 0; margin-left: 0; margin-right: 0; } }