:root { --bg-color: beige; --bg-header: papayawhip; --text-color: darkslategrey; --hover-bg: wheat; --cov-hit: green; --cov-miss: red; --cov-hit-bg: darkolivegreen; --cov-miss-bg: firebrick; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg-color: black; --bg-header: black; --text-color: lightyellow; --hover-bg: dimgrey; --cov-hit: limegreen; --cov-miss: red; --cov-hit-bg: darkgreen; --cov-miss-bg: firebrick; } } [theme="light"] { --bg-color: beige; --bg-header: papayawhip; --text-color: darkslategrey; --hover-bg: wheat; --cov-hit: green; --cov-miss: red; --cov-hit-bg: darkolivegreen; --cov-miss-bg: firebrick; } [theme="dark"] { --bg-color: black; --bg-header: black; --text-color: lightyellow; --hover-bg: dimgrey; --cov-hit: limegreen; --cov-miss: red; --cov-hit-bg: darkgreen; --cov-miss-bg: firebrick; } header { z-index: 10; display: grid; grid-column: 1 / 3; grid-template-columns: 1fr auto 1fr; background-color: var(--bg-header); align-items: center; padding: 0 14px 0 10px; font-family: system-ui, Arial, Helvetica, sans-serif; } img { padding-right: 2px } iframe { width: 100%; height: 100%; border: 1px solid #444; box-sizing: border-box; } a { display: inline-block; color: var(--text-color); text-decoration: none; margin: 0; padding: 2px 4px; border-radius: 4px; } a:hover { background-color: var(--hover-bg); } #index { /* index.html: */ display: grid; height: 100vh; margin: 0; grid-template-rows: 50px 1fr; grid-template-columns: calc(30ch + 10px) 1fr; background-color: var(--bg-color); color: var(--text-color); font-family: monospace; } #buttons { display: flex; justify-self: end; } #tree { /*