*, *:before, *:after { box-sizing: border-box; } html { background-color: #eee; } body { font-size: 16px; font-family: 'PT Sans'; max-width: 42rem; margin: -1.5rem auto; padding: 0 1rem; border: 1px solid #ccc; background-color: #fcfcfc; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } a, a:visited { text-decoration: none; color: #32609C; } a:hover { color: #339; } header { font-size: 0.9rem; padding-top: 1.25rem; } header nav ul { font-size: 0.9rem; font-family: 'DejaVu Sans Mono'; list-style-type: none; padding: 0; } header nav ul li { display: inline; margin-right: 0.5rem; } header nav a, header nav a:visited { color: #444; } header nav a:hover { color: #000; } header h1 { margin: 0; } .entry, .botborder { margin-bottom: 1rem; border-bottom: 0.15rem; border-bottom-style: dotted; border-bottom-color: #bbb; } .entry { color: #222; } .entry .title { font-size: 1.4rem; margin-top: 0.3rem; margin-bottom: 0.3rem; } .entry .info { font-size: 0.9rem; color: #505050; margin-bottom: -0.4rem; } .entry .botinfo { font-size: 0.9rem; text-align: right; margin-top: -0.75rem; margin-bottom: 0.5rem; } .entry > p:first-of-type:first-letter { float: left; color: #903; font-size: 2.8rem; line-height: 2rem; padding-top: 0.4rem; padding-right: 0.4rem; padding-left: 0.1rem; font-family: 'Georgia'; } @media (max-width: 767px) { .entry > p:first-of-type:first-letter { padding-top: 0.3rem; padding-right: 0.2rem; font-size: 2.7rem; } } blockquote { position:relative; margin: 1.5rem 0 1.5rem; padding: 0 2rem 0 2rem; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { content: open-quote; font-size: 5rem; position:absolute; left: -0.1rem; top: 1.7rem; line-height: 0.1em; color: #ccc; } blockquote:after { content: close-quote; font-size: 5rem; position:absolute; right: -0.1rem; bottom: -1.1rem; line-height: 0.1em; color: #ccc; } tt.literal { font-size: 0.75rem; } #index, #about { padding-bottom: 0.5rem; color: #222; } p#last-upd { font-size: 14px; text-align: right; margin: 0; } p#author { font-size: 14px; text-align: right; margin: 0; } footer { font-size: 16px; display: flex; align-content: flex-start; } footer p { margin: 0; padding: 0; } footer a { font-size: 14px; } footer #foot-left { flex: 1; color: #333; margin-bottom: 1rem; } footer #contact-info-wrapper { display: flex; flex-wrap: wrap; } footer #contact-info-wrapper p { padding-right: 0.25rem; } footer #emblem { flex: 1; flex-basis: 40px; flex-grow: 0; } footer #emblem img { width: 40px; height: 40px; } .small-text { font-size: 10px; } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url('https://theos.kyriasis.com/fonts/ptsans.ttf') format('truetype'); } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: local('PT Sans Bold'), local('PTSans-Bold'), url('https://theos.kyriasis.com/fonts/ptsans-bold.ttf') format('truetype'); } @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: local('PT Sans Italic'), local('PTSans-Italic'), url('https://theos.kyriasis.com/fonts/ptsans-italic.ttf') format('truetype'); } @font-face { font-family: 'DejaVu Sans Mono'; src: local('DejaVu Sans Mono'), url('https://theos.kyriasis.com/fonts/DejaVuSansMono.woff') format('woff'); font-weight: normal; font-style: normal; }