html { font-family: "Fira Sans"; line-height: 1.5; background-color: #282a2e; color: #c5c8c6; } body { margin: auto; padding: 0; max-width: 80ch; } header, main, footer { margin: 1rem; padding: 0.5rem 1rem; } main { background-color: #1d1f21; } footer { text-align: right; } blockquote { padding: .5rem 1rem; margin: .8rem 0; color: #c5c8c6; border-left: .25rem solid #282a2e; } @media (min-width: 30em) { blockquote { padding-right: 5rem; padding-left: 1.25rem; } } img { display: block; margin: auto; border-radius: 5px; max-width: 100%; } code { padding: .25em .5em; font-size: 85%; background-color: #282a2e; border-radius: 0; } pre { display: block; margin-top: 0; margin-bottom: 1rem; padding: 1rem; font-size: .8rem; line-height: 1.4; white-space: pre; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; background-color: #282a2e; } pre code { padding: 0; font-size: 100%; color: inherit; background-color: transparent; } a { color: #81a2be; text-decoration: none; border-bottom: 0.1rem dashed #81a2be; } a:visited { color: #b294bb; } a:hover, a:focus { border-bottom: 0.2rem solid #81a2be; } h1, h2, h3, h4, h5, h6 { margin-bottom: .5rem; font-weight: 400; line-height: 1.25; } h1 { font-size: 2rem; border-bottom: 0.16rem solid #cc6666; } h2 { margin-top: 1rem; font-size: 1.5rem; } h3 { margin-top: 1.5rem; font-size: 1.25rem; } h4, h5, h6 { margin-top: 1rem; font-size: 1rem; } ul, ol, dl { margin: 1rem 0; } hr { color: #cc6666; } table { margin-bottom: 1rem; width: 100%; border: 1px solid #282a2e; border-collapse: collapse; } td, th { padding: .25rem .5rem; border: 1px solid #282a2e; } tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: #282a2e; } button, input, select, textarea { background-color: #282a2e; color: #c5c8c6; padding: 0.2rem 0.8rem; } textarea { width: 80%; } textarea { resize: vertical; }