:root { --color: #000; --backc: #fff; --themc: #3584e4; --themtxt: #1c71d8; --elev: #ddd; } a { color: #0032A0; } @media only screen and (prefers-color-scheme: dark) { :root { --color: #fff; --backc: #222; --themc: #3584e4; --themtxt: #62a0ea; --elev: #444; } a { color: #1032bf; } } html { scroll-behavior: smooth; } body { font-family: "Roboto Mono", monospace; color: var(--color); background: var(--backc); margin: 0; } input { font-family: inherit; /* font-family: "Roboto Mono", monospace; */ color: var(--color); background: var(--elev); border-width: 3px; border-color: var(--color); padding: 5px; } * { border-radius: 0; } main { margin: 0 auto; width: 40em; /* compatibility with older browsers */ width: min(90vw, 40em); } section { border-width: 4px; border-color: black; border-style: solid; padding: 16px; margin: 4px; } h1 { text-align: center; } section h2 { margin-top: 0; } pre { font-weight: 700; } header { text-align: center; color: black; background-color: #3584e4; padding: 10px; margin-bottom: 10px; } ::selection { background: var(--themc); color: var(--backc); display: none; } a:visited { color: #8C4799; } a:hover { color: #D00070; } nav a { text-decoration: none; border-width: 3px; border-color: black; border-style: outset; background-color: lightgrey; padding: 0.2em; } /* you can pet the cat! */ .pettable { transition: 6s; transition-timing-function: ease-out; transform-origin: bottom; cursor: grab; } .pettable:hover { transform: scaleY(.26); } .pettable:hover::before { content: " mrrr"; position: fixed; font-size: xx-small; top: 0.2em; text-align: center; opacity: 0; transform: 2s opacity; } /* end of cat petting code */