:root { --color: black; --background-color: white; --hover-color: hsl(0, 0%, 93%); --nav-color: hsl(0, 0%, 87%); } @media(prefers-color-scheme: dark) { :root { --color: white; --background-color: black; --hover-color: hsl(0, 0%, 7%); --nav-color: hsl(0, 0%, 13%); } body { color: var(--color); background-color: var(--background-color); } a { color: hsl(211, 100%, 60%); } a:visited { color: hsl(242, 100%, 80%); } } body { font-family: monospace; max-width: 1100px; margin: 0 auto 0 auto; } .logo { height: 6em; width: 6em; } .header-horizontal-grouping { display: flex; align-items: center; margin-top: 1em; margin-bottom: 1em; } .header-description { margin-left: 2em; } nav { margin-top: 2em; } nav ul { display: flex; list-style-type: none; margin-bottom: 0; } nav li { margin-left: 10px; } nav a, nav a:visited { padding: 2px 8px 0px 8px; color: var(--color); } .selected-nav-item { background-color: var(--nav-color); } hr { margin-top: 0; border: 0; border-top: 3px solid var(--nav-color); } table { margin: 2em auto; } th { padding-bottom: 1em; } tbody tr:hover { background-color: var(--hover-color); } td { padding-left: 1em; padding-right: 1em; } footer { text-align: center; }