body { font-family: monospace; font-size: 21px; max-width: 80ch; margin: auto; background: black; color: lime; border: solid 2px; padding: 15px; } a { color: orange; text-decoration: underline dotted; } a:visited { color: chocolate; } h1,h2,h3 { border-bottom: dashed 1px; } header { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px auto; } header h1 { margin: 0px; width: 100%; grid-column: 1/4; } header time { justify-self: start; } header .p-author { justify-self: center; } header .u-url { justify-self: end; } p { margin: 1em 0em 1em; } pre { border: solid 2px; padding: 15px; font-size: 21px; } ul { margin: initial; list-style-type: "> "; } hr { margin-top: 20px; border: 1px solid lime; } nav ul { display: flex; list-style: none; } nav ul li { margin: 0% 2%; } footer ul { list-style: none; } @media (prefers-color-scheme: light) { body { background: oldlace; color: darkslategrey; } a { color: chocolate; } a:visited { color: maroon; } hr { border: 1px solid darkslategrey; } } @media only screen and (max-width: 600px) { nav ul { display: block; border: 1px solid; padding: 20px 0px 20px 40px; list-style-type: "> "; } pre { display: none; } }