body, html { height: 100%; color: #111; margin: 10px; font-family: "monospace"; font-size: 1em; line-height: 1.5em; background-color: #fff; } html { margin: auto; width: 100%; max-width: 80ch; } header { margin-bottom: 1em; } .banner { display: inline-block; width: 100%; } .banner img { float: left; width: 4.5em; height: 4.5em; } .banner p { position: relative; left: 0.4em; } footer { margin-top: 1em; border-top: 1px solid #111; } p, table, thead, tbody, pre, code, div { width: 100%; } p { text-align: justify; } tbody tr { background-color: #eee; } ul { margin: 0; padding: 0; } li { list-style-type: disc; } li.articlelink { list-style: none; margin: 0; padding: 0; } h1 { color: #222; font-size: 3em; } h2, h3, h4, h5, h6 { color: #222; } h2.blogyear { background-color: gold; padding: 4px; } a { color: #00e; text-decoration: none; } a:hover { text-decoration: underline; } strong, em { color: red; padding-left: 2px; padding-right: 2px; } b { font-weight: bold; } small { color: #8ec07c; } img { max-width: 100%; } blockquote { border-left: 2px solid khaki; padding-left: 20px; margin-left: 0px; } blockquote p { font-style: italic; } hr { height: 0; border: 0; border-top: 2px solid #458588; margin: 1em 0; padding: 0; } td { padding-left: 1ch; padding-right: 1ch; } th { color: #222; background-color: gold; padding: 4px; } pre { font-family: monospace; white-space: pre-wrap; font-size: 0.8em; border-left: 1px solid #999999; padding: 10px; text-align: left; } code { font-family: monospace; background: #eee; white-space: pre-wrap; display: block; padding: 10px; text-align: left; } .wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure { margin: 0; margin-top: 30px; background: #8ec07c; width: 400px; max-width: 100%; } figcaption { margin-bottom: 10px; padding: 10px; background: #8ec07c; color: #111; font-size: 1em; } .center { text-align: center; }